- This topic has 9 replies, 4 voices, and was last updated 1 year, 6 months ago by
.
-
Posts
-
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?
Customer Support
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/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.Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/Brill. Thanks again.
You’re welcome
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/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.Customer Support
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?"I’m sorry Elvin,
I will open a new topic.
Thank youNo problem. Thank you.
A wise man once said:
"Have you cleared your cache?"
- You must be logged in to reply to this topic.