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

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?

My website: lucassousa.me

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

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

Hello there,

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

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

Regards,
Kharis

Worket! Thank you Kharis.

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