How do I leave the media without being capped in the mobile version?

Sydney
#1

After adding the following CSS

#masthead {
     padding: 7px;
     position: fixed!
     background: #ffffff! important;
}

part of the mobile version’s header was capped a piece of media from the Header Area.
How do I leave the media without being capped in the mobile version?

IMG_5170
IMG_5170.jpg1242×2208 1.28 MB
IMG_5171
IMG_5171.jpg1242×2208 1.26 MB

My website: lucassousa.me

#2

Hello there,

Try adding the below CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (max-width: 680px) {
      
      .sydney-hero-area {
        margin-top: 55px;
      }
      
    }

Regards,
Kharis

#3

OK it worked. Thank you!
Now for a little bit wider I added the CSS that passed me this one here:

    @media only screen and (max-width: 680px) {
      .sydney-hero-area {
        margin-top: 70px;
      }
      .site-header.float-header {
        background-color: #ffffff! important;
      }
      #masthead {
        padding: 17px;
      }
    }

But I only managed to make the header of the “HOME” and “BLOG” page wider. Is the code I added correct? I want to leave all the pages of the site with the same larger header

IMG_5181
IMG_5181.jpg1242×2208 301 KB
IMG_5180
IMG_5180.jpg1242×2208 1.22 MB

#4

Hello there,

If I got it correctly, you’d add this extra custom CSS code:

    body:not(.home) .header-clone {
      display: none; 
    }

Regards,
Kharis

#5

Worket! Thank you Kharis.

#6

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis