Header in Mobile mode

[Lee]

Hello there,

I’ve created a header for a page through Elements and it looks great on Desktop. However, not so much on mobile – only a small portion of the image appears.

On mobile only, is there a way of minimising the photo to have it appear like it would if I were to set it as a featured image within the page itself?

[David]

Hi there,

Scaling background images when there is content inside the container ( ie. the post title ) is tricky.

If there was no content you could set the Top and Bottom padding as a % unit, to equal the aspect ratio of your image. For example your image is 782px(H) x 1174(W) divide the two and multiply by 100:

782 / 1174 * 100 = 66%.

Setting the top padding to 33% and bottom padding to 33% ( total 66% ) will maintain the original images aspect ratio.

As there is content inside the container you would need to tweak these values down a little. eg 30%. It won’t be 100% perfect but will get you closer to the mark.

Alternatively if you want to keep using Pixel padding, you can select the Mobile icon beside the padding and set a lower mobile value.

Ideally you want all your featured images to be the same size ( aspect ratio ).

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Lee]

I understand. Thank you.

Can I also ask, is there a difference in creating a header through Elements to creating a header within the page (builder) using the “Cover” option?

[David]

The main difference is a Header Element can be dynamic.
So you can create 1 x Header Element, set it to display a Featured Image Background and the {{post_title}}. Then set the Display Rules to where you want it to appear. Then everything is automated, no need to create a separate container block for each element. It also has greater styling control then the cover block.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Lee]

Brill. Thanks again.

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Enrico]

Hi David.
Please, I need your help. I followed your instructions and it works well in one site, but it does not work in another one, this one.

[Elvin]

Hi @Enrico,

As this particular topic is resolved for the topic starter, can you open a new topic for your site?

So you could use the private information text field incase some details are needed in solving the issue. Thank you.

A wise man once said:
"Have you cleared your cache?"

[Enrico]

I’m sorry Elvin,
I will open a new topic.
Thank you

[Elvin]

No problem. Thank you.

A wise man once said:
"Have you cleared your cache?"

[Author]

Posts