[Resolved] Page Hero > Featured Image > Responsive full width img

Home Forums Support [Resolved] Page Hero > Featured Image > Responsive full width img

Home Forums Support Page Hero > Featured Image > Responsive full width img

  • This topic has 5 replies, 2 voices, and was last updated 2 months ago by David.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #2007551
    Marcell

    Hey GeneratePress-Team,

    I have read dozens of support articles but couldnt find the right answer to my problem. So Im asking on this fine forum.
    On my site I want a reponsive page hero img. I have set this as an featured image on the homepage post.

    Currently the image is responsive. But it stretches the whole height in the browser, so it fills the browser screen. I want it to stay visible in the whole width. So the text from the website should slide up into the visible area.

    I would be great if you can help me here.

    Live website: https://www.magicademy.de
    My current Page Hero settings: https://postimg.cc/BLC12S6w

    Kind regards,
    Marcell

    #2007636
    David
    Staff
    Customer Support

    Hi there,

    so do you want that image to be fixed so it doesn’t scroll off the screen ?

    #2007661
    Marcell

    Hi David,

    no, the image must be full screen responsive. But on mobile, the image should be displayed in the maximum width so that you can read the font. At the moment, however, the image on the smartphone is stretched from top to bottom, so only the middle part of the font is displayed.

    Here is a rough sketch to make things clearer: https://postimg.cc/Cz5QSfDv

    Regards, Marcell

    #2007668
    David
    Staff
    Customer Support

    Edit the Header Element, in the Padding, select the mobile icon and set to Top padding to 56% – make sure its a percentage.
    Note the 56% is the aspect ratio of your original image ( h / w * 100 )

    Save that.

    Then add this CSS to your site to disable the full height on mobile:

    @media(max-width: 768px) {
        .page-hero {
            min-height: auto;
        }
    }
    #2007714
    Marcell

    Hi David,

    this solved my problem. Many thanks for that!

    Regards, Marcell

    #2008102
    David
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.