[Support request] Scaling hero as browser shrinks

[Pamela]

How can I make a page hero in which the entire image shrinks when the browser size reduces, rather than having it cut off the sides of the image? I tried setting padding as a percentage, but that didn’t seem to do anything.

The site I’m redoing was in SiteOrigin and exhibits the behaviour they want. https://peopleforprogressfoundation.com

I’ve tried a few different GP demo sites, and all the ones I tried cut the image off in the same way. It’s ok if the image height shrinks; we just don’t want to cut off the kid or the organization name.

[Elvin]

Hi there,

I’m not sure I fully understand what you mean.

To clarify: Are you trying to make the page hero appear like this?
https://share.getcloudapp.com/kpu7NANB

If so, check for any Layout Element on Appearance > Elements and check it’s content tab. Set the content area to “contained” or “default” rather than full width so the contents are contained.
https://docs.generatepress.com/article/layout-element-overview/#content-1

Alternatively, you can completely delete the layout element if you find it useless.

[Pamela]

Here’s an example. The one on the left is what happens in GP (picture stays tall but cuts off half of child when browser width narrows). The one on the right is SiteOrigin, which I would like to reproduce in GP. See in GP how the picture looks quite different on a wider window than a narrower one? I would like the whole picture to be there regardless, even on a phone.

https://thelorax.smugmug.com/Category/SmugShots/i-g6JbDPt/A
https://thelorax.smugmug.com/Category/SmugShots/i-kF2GGXM/A

I would prefer to use the page hero element in GP if possible, unless there’s some better way to do it in GenerateBlocks. I’d like it to be full width, ideally; the SiteOrigin one is contained, with visible background on the sides.

Thanks.

[Elvin]

Ah I see, thanks. I appreciate the screenshots. It’s really helpful.

Try adding this CSS so the background’s position is different on mobile:

@media(max-width:768px){
    .gb-container-c1f1455e:before{
        background-position: 20% top;
    }
}

Here’s how to add css: https://docs.generatepress.com/article/adding-css/

[Pamela]

I’ve done that and cleared the cache, but I can’t see that it made any difference.

Mobile isn’t the only issue, though. Here’s what happens to it full width on my 27″ iMac:
https://thelorax.smugmug.com/Category/SmugShots/i-sm4KCGg/A

There must be some way to just have it scale the whole photo to whatever width the browser window is. (On the iMac, this would make for a very big picture, so I may end up using a container anyway.)

[Pamela]

Hmmm. I guess you’re right that it’s currently using a GB layout element, but the same thing happens if I build a page header element in GP Premium.

[Elvin]

More edits to suggest:

Go to the Container Block element that contains this background image and set the Container Width to 1200px as shown here: https://share.getcloudapp.com/o0uEqJkN

And on the Background settings, change the background position from center top to center center as shown here: https://share.getcloudapp.com/E0u94LPq

You then add this CSS:

.gb-container-c1f1455e > .gb-inside-container {
    padding: 10% 30px;
}

This is how it would behave after applying the suggested changes. https://share.getcloudapp.com/2NuE0pAQ

[Author]

Posts