Hide a div that is part of all pages on one specific page

Question

How can I hide a div (which contains an image) for a specific WordPress page?

I believe my page id is 46:

Here is the div I am trying to change:

<div id="static-footer-image" style="position:absolute; bottom: -15px; z-index: 501;">
    <img src="images/background-bottom.png"/>
</div>

And the associated CSS code in my main CSS file:

#static-footer-image body.page-id-46 { 
     display: none; 
}

It is still showing. What do I do to fix this?

Answer 1

Guess from the URL structure, your %postname% permalink structure is active. So, a bit of internal CSS can help alternatively, and the syntax is in_page('page_slug'):

<?php // Do action only on specific page in WP ?>
<?php if( in_page('resourses') ) { ?>
<style>
  #static-footer-image{
      display: none;
  }
</style>
<?php } ?>

Answer 2

Use following CSS

body.page-id-46 #static-footer-image { 
     display: none; 
}

and make sure "page-id-46" class is applied to body tag and Clear the cache. May be try on another browser or a incognito window.

Answer 3

If that's the page ID, the selector should be

body#page-id-46 #static-footer-image

not

body.page-id-46 #static-footer-image

Answer 4

You may have a display in CSS so you may try:

body.page-id-46 #static-footer-image { 
     display: none !important; 
}

Answer 5

This works for me:

body .page-id-46 #static-footer-image { 
     display: none; 
}

not this:

body.page-id-46 #static-footer-image { 
     display: none; 
}

After body give a space and type .page-id-46 #static-footer-image{display: none;} Once again check whether it's a class or id. in my case, it's an id, here is my code for your reference:

body #post-448 .entry-meta-bar
{
    display:none;
}

Hope this will help you.