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

[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

[David]

Hi there,

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

[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

[David]

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;
    }
}

[Marcell]

Hi David,

this solved my problem. Many thanks for that!

Regards, Marcell

[David]

Glad to be of help!

[Author]

Posts