- This topic has 9 replies, 4 voices, and was last updated 2 months, 3 weeks ago by
Elvin.
-
AuthorPosts
-
November 5, 2020 at 3:12 am #1518746
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?
November 5, 2020 at 4:22 am #1518813David
StaffCustomer SupportHi 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/November 5, 2020 at 4:53 am #1518851Lee
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?
November 5, 2020 at 5:21 am #1518894David
StaffCustomer SupportThe 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/November 5, 2020 at 6:07 am #1518953Lee
Brill. Thanks again.
November 5, 2020 at 7:09 am #1519234David
StaffCustomer SupportYou’re welcome
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/December 11, 2020 at 2:07 am #1575593Enrico
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.December 11, 2020 at 2:23 am #1575609Elvin
StaffCustomer SupportHi @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?"December 11, 2020 at 3:20 am #1575704Enrico
I’m sorry Elvin,
I will open a new topic.
Thank youDecember 13, 2020 at 4:48 pm #1579151Elvin
StaffCustomer SupportNo problem. Thank you.
A wise man once said:
"Have you cleared your cache?" -
AuthorPosts
- You must be logged in to reply to this topic.