[Support request] Responsive Hero Header – Image Not Shrinking on All devices.

[authorityrocket]

Hi,

Been trying to solve this for the past 2 days and I think it’s time to reach out for some help from this awesome community.

The image we have for the home page hero/header image won’t fully shrink for us for some reason. We’ve tried different padding, hiding the image (would rather keep it), showing a different image which is square and if we get it right on mobile its not right on iPad.

Can someone please help?

[David]

Hi there,

use % top and bottom padding instead of pixels to keep it responsive.
When there is content inside the container it makes it tricky to keep the image fully responsive.

For example if there were no Content then you can use Top and Bottom % padding that equals the original image aspect ratio. eg.

794px (H) / 1597px (W) * 100% = 50% rounded up.

So adding Top: 25% and Bottom: 25% padding matches the aspect ratio.

When there is content added to the element those %s need to be reduced a little to compensate for the height the content adds to the container.

I would try 22% top and bottom for desktop, and about halve that for Mobile.

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

[authorityrocket]

Hi David,

Thank you so much. I gave this a try and it did make it look a lot better so I think we will just leave this as is and see how we go.

Thank you so much!!

[David]

You’re welcome

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

[Author]

Posts