[Support request] Page Hero not responsive when screen size is 600-750

Home Forums Support Page Hero not responsive when screen size is 600-750

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1331529
    Alexis

    Hello! I’m having trouble with my page hero. When the screen size hits 600, the page hero width jumps to 750 and stays there until the rest of the screen catches up to 750. You can see what I mean if you go to the website listed and inspect as mobile.
    My media query currently reads this-


    @media
    only screen
    and (min-device-width: 414px)
    and (max-device-width: 736px)
    and (-webkit-min-device-pixel-ratio: 3)
    and (orientation: portrait) {
    .page-hero {
    margin: auto;
    padding-right: 0px;
    padding-bottom: 20px;
    padding-top: 100px;
    }

    .page_hero_content {
    font-size: 16px;
    height: auto;
    padding-left: 0px;
    margin: auto;
    }
    }

    That was an attempt to fix it, but it doesn’t seem to have worked! How do I make the width of the page hero image the same width as the rest of the page?

    #1331755
    Leo
    Staff
    Customer Support

    Hi there,

    Can you try reducing the header element mobile padding and see if you can make it work without additional CSS?
    https://docs.generatepress.com/article/header-element-overview/#padding

    You can also try this CSS (without your own CSS) and see if it works better:

    @media (max-width: 768px) {
        .page-hero {
             background-position: center right;
        }
    }
    #1331803
    Alexis

    So now the header fits with the rest of the website, but there seems to be a break point at 600-750px…
    Below 600 the page hero content snaps to the smaller size. From 600-750 the content stays at the larger size and overlaps other page elements.

    #1331872
    Leo
    Staff
    Customer Support

    GP doesn’t have any breakpoints between 600-750.

    I do see this CSS being added by you?
    https://www.screencast.com/t/Fh8w5OLM7dw

    #1331904
    Alexis

    But the padding still disappears from the page hero content in that range.

    That code was my attempt at keeping the page hero content padding through that range. It didn’t work sadly.

    I’m not sure what’s causing it. I’m not implying it’s GP–I just want to know how to fix it!

    #1332006
    Leo
    Staff
    Customer Support

    Can you remove your own CSS first?

    It’s setting the right padding to 0.

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