Archived topic
Header in Mobile mode
9 replies · Started by Lee on November 5, 2020
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?
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 ).
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?
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.
Brill. Thanks again.
You're welcome
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.
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.
I'm sorry Elvin,
I will open a new topic.
Thank you
No problem. Thank you.
