CSS changes for one page only

Hi,

I want to hide the header image on the page http://propertynelson.site/index.php/page/
but keep it on the rest on the page

I know this is easily done with css but Im not entirely sure! I have created a custom page template just in case this helps out

Thanks

Hello there,

Each page has an unique ID number which can be found when you edit the page. In the address bar of your web browser, you’ll see something like:


http://yoursite.com/wp-admin/post.php?post=720&action=edit

To CSS on a specific page, you can use the unique body class name recognized by its ID number which looks like this:


.page-id-720

So, to hide the header image, you’ll use the below CSS code:


.page-id-720 .header-image {
  display: none;
}

.page-id-720 .site-header {
  background-color: rgba(0,0,0,0.9);
}

@media only screen and (min-width:1025px) {
  
  .page-id-720 .page-wrap {
    padding-top: 210px;
  }
  
}

To apply it to your site, add it into Appearance > Customize > Additional CSS.

Regards,
Kharis

Thanks Kharis this worked perfectly.

One last question

I want to create a Siteorogin Hero and I want it to be 100% width and height on a desktop but responsive on a smartphone (100% width but 30% height)

How do I do this?

Hello there,

I am sorry, since your question doesn’t relate with the topic you initially wrote, please separate your other question into a new topic. By doing so, you’ll help us to keep our support forum well archived and easier to browse by other users who might have similar question.

Regards,
Kharis

Ok