[Support request] Page Hero

[David]

Now add this CSS to your site:

@media(max-width: 768px) {
    .gb-container.hero-block {
        background-size: 150%;
        background-position: bottom left;
    }
}

this size may need tweaking background-size: 150%;

[Lee]

Brill. Thank you for this.

It’s worked – the image now appears below the text when viewed in mobile mode.

Is there now a way of bringing the image a little higher up when viewed in mobile mode? At the moment there is a lot of space between my heading and my image?

[David]

Remove the space block you’re using to give the containers some height.
Instead select the Container Block and increase the Bottom Padding, you can then set a smaller Bottom padding ( if required ) for Mobile

[Lee]

Thanks again.

I’ve deleted the spacing, but I’m struggling to get the Text where I want it. Is there a way I can lift it a little higher within the image when in desktop mode?

[David]

You could increase the Bottom Padding on Desktop.

The basic rules for vertical centering the content in a Container Block is by setting the Top and Bottom padding. If both are equal then the content is vertically centred.
Sometimes this may not look correct – that maybe because:

1. There is another nested container such as a grid that has uneven top and bottom padding.
2. An element in the container ( or a nested container ) such as a Headline Block may have margin applied to it. Things like headlines have bottom margins applied to them by default ( as per the Customizer > Layout > Typography settings ) but you can zero them out on any GenerateBlock under the blocks Spacing settings.

[Lee]

Hey again David,

Many thanks for all your help with this thus far. I’ve almost got it looking like I want, but I’m struggling with the main text when in Mobile mode.

I basically want to lift the text in mobile mode as it appears too low as it stands. I’ve tried increasing the bottom padding (in mobile) but this only seems to move the image rather than moving the text?

[David]

Select the parent Container where you have 200px Top Padding, click the Mobile tab and reduce this to 100px.

Then select the Grid Container you have your text in and on Mobile increase its Bottom padding by 100px or so.

[Lee]

Brilliant again! Thank you.

[David]

You’re welcome

[Author]

Posts