Archived topic
Simple home page hero - can't get responsiveness
9 replies · Started by Ioannis on May 13, 2022
I am a new user to generatepress so excuse any lack of knowledge. I am trying to create a simple home page hero for a client's website, I have read numerous help articles, created the element and the containers, but the hero image on the resulting page is not responsive.
What I am after is:
1. Full width image
2. Responsive so it shrinks and expands without cropping on smaller screen resolutions
3. The ability to add some custom text with links
If you can point to a help page I might have missed or have some tips I would be grateful, it is so simple yet has cost me so much time..
Hi there,
can you share a link to where i can see the Hero ?
Yes, this is a test site, it will replace the existing one when everything is in place..
I made some changes and it looks a bit better, but it's not yet what I want. I want it to be easy to set by the client on a regular basis, he will have to use specific size image.
Notice that the tiger gets chopped when in full hd resolution..
Its a tricky operation.
1. Calculate the Aspect Ratio of the original Background image like so:
original image height / original image width * 100 = % ratio
Your image: 300 / 1375 * 100 = 21%
2. Select the parent Container Block. The background image should be added to that container.
In the Spacing -> Minimum Height add: 21 and select the VW units.
Now the Container Block will have a minimum aspect ratio to match the image.
3. Now select the Headline Block, switch to Mobile View, and use the Typography settings to reduce the font sizing.
This is the tricky part as you need to make sizing adjustments on mobile so as NOT to distort the aspect ratio.
Thank you so much, I have a working state right now, I will try to finalize it and see if there are any relevant issues.
Can I hide an element on mobile view, then make a separate one that is hidden in desktop view, so as to avoid shrinking the fonts too much?
Yes, if you select the parent Container Block that you want to hide or show. In the Advanced > Additional CSS Class(es) field you can add a GP hide-on-* class:
https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classes
So for the Container you want for Desktop you can add:
hide-on-mobile
And the one for the Mobile you can add:
hide-on-desktop hide-on-tablet
IF you're a GenerateBlocks Pro user then those are built in to the Advanced tab.
Thank you David, wonderful stuff, I will work with the above and reply tomorrow.
You're welcome
It works.
We can mark this as solved, thank you again!
Great to hear that!!
