We have come across a few sources in the past few weeks, some plugins and some scripts that we have needed to edit in order to correct formatting irregularities.<\/p>\n
<\/p>\n
The problems have occurred when certain elements within a web page need to be hidden, but not removed from the site. A common example of this is when you have a chunk of information that only becomes visible when you click on a button, or when a script writes empty containers into the site to be used separately.<\/p>\n
The two most common ways to do this are to use either: visibility: hidden<\/strong> or display: none<\/strong>.<\/p>\n They are both CSS properties that can be applied to elements to hide them or stop them displaying.<\/p>\n visibility: hidden<\/em><\/strong> – This tag hides the element’s contents, think of it as making the element invisible.<\/p>\n display: none<\/em><\/strong> – This tag stops the element from being displayed.<\/p>\n The difference is essentially that when you use visibility: hidden<\/strong> the element is invisible but not gone – the spacing of the element will still be there. When you use display: none<\/strong><\/p>\n the element is never rendered at all so any space that would have been taken up is also removed.<\/p>\n You can see an example of this on the right:<\/p>\n<\/div>\n No Style<\/strong><\/p>\n Main Text<\/p>\n<\/div>\n Some other Text<\/p>\n<\/div>\n<\/div>\n visibility: hidden<\/strong><\/p>\n Main Text<\/p>\n<\/div>\n Some other Text<\/p>\n<\/div>\n<\/div>\n display: none<\/strong><\/p>\n Main text<\/p>\n<\/div>\n Some other Text<\/p>\n<\/div>\n<\/div>\n<\/div>\n They both have there merit depending on the desired effect – if you are hiding an element but want the rest of the page to appear the same whether it is visible or not then visibility: hidden will maintain the element space and preserve the page formatting.<\/p>\n You can also use the above elements inline for example: <div style=”display: none”>\/\/ your content here <\/div><\/em><\/strong> which is particularly useful when you are embedding scripts directly onto a page.<\/p>\n Never fear! Help is here! Get in touch if we can help you with any of your online needs!<\/p>\n","protected":false},"excerpt":{"rendered":" We have come across a few sources in the past few weeks, some plugins and some scripts that we have needed to edit in order to correct formatting irregularities.<\/p>\n","protected":false},"author":1,"featured_media":1118,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,51],"tags":[40],"Service Categories":[],"_links":{"self":[{"href":"https:\/\/spotlightstudios.co.uk\/wp-json\/wp\/v2\/posts\/1117"}],"collection":[{"href":"https:\/\/spotlightstudios.co.uk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/spotlightstudios.co.uk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/spotlightstudios.co.uk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/spotlightstudios.co.uk\/wp-json\/wp\/v2\/comments?post=1117"}],"version-history":[{"count":3,"href":"https:\/\/spotlightstudios.co.uk\/wp-json\/wp\/v2\/posts\/1117\/revisions"}],"predecessor-version":[{"id":3340,"href":"https:\/\/spotlightstudios.co.uk\/wp-json\/wp\/v2\/posts\/1117\/revisions\/3340"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/spotlightstudios.co.uk\/wp-json\/wp\/v2\/media\/1118"}],"wp:attachment":[{"href":"https:\/\/spotlightstudios.co.uk\/wp-json\/wp\/v2\/media?parent=1117"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/spotlightstudios.co.uk\/wp-json\/wp\/v2\/categories?post=1117"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/spotlightstudios.co.uk\/wp-json\/wp\/v2\/tags?post=1117"},{"taxonomy":"service-category","embeddable":true,"href":"https:\/\/spotlightstudios.co.uk\/wp-json\/wp\/v2\/Service Categories?post=1117"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Similar.. but not the same.<\/h3>\n
So what is the difference?<\/h2>\n
Which one should I use?<\/h2>\n
I need more help!<\/h2>\n