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

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

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1027453
    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.

    #1027714
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #1028002
    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!

    #1028596
    Tom
    Lead Developer
    Lead Developer

    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 🙂

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.