[Support request] Site is responsive except for header images on each page of site

[Kelly Johnson]

My site was created using Generate Press, and all of the pages show as responsive except for the header images on each page.
The header images are not responsive.
I am requesting assistance for how to make the header images responsive on the site.
Thank you.

[Tom]

Hi there,

Is there a specific part of your header you’re wanting to improve? The actual header image and menu toggle look good.

The header widget isn’t responsive because of these inline styles: https://www.screencast.com/t/JZcHioov3L6

The negative margins are messing it up on mobile. If those margins are needed, they should be applied to desktop-only using CSS inside a media query.

Let me know if you need help doing that 🙂

[Kelly Johnson]

Thank you Tom for your reply; I appreciate it!
Those margins are needed.
Would you be able to provide the coding I need to use to have it “applied to desktop only using CSS inside a media inquiry?”
Thank you!

[Tom]

So, this is what you have right now:

<div style="margin-left: 00px; margin-right: -70px; margin-top: -50px; margin-bottom: -100px;">

Replace it with this:

<div class="header-optin">

Now, add this CSS:

@media (min-width: 769px) {
    .header-optin {
        margin-left: 0px; 
        margin-right: -70px; 
        margin-top: -50px; 
        margin-bottom: -100px;
    }
}

That should fix it 🙂

[Author]

Posts