Archived topic

Site is responsive except for header images on each page of site

3 replies · Started by Kelly Johnson on October 6, 2019

Viewing posts 1–4 of 4

October 6, 2019 at 4:42 am #1027453

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.

October 6, 2019 at 10:01 am #1027714

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 :)

October 6, 2019 at 9:59 pm #1028002

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!

October 7, 2019 at 10:13 am #1028596

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 :)

This archived topic is closed to new replies.

Start building better websites today.