[Resolved] Page hero image not responsive

[Mark]

I have created a page hero using the element header. The page hero image looks fine on desktop, but does not appear to be responsive on mobile (at least on the iPhone). Is there additional CSS I need to use to make the image repsponsive?

Thanks

[David]

Hi there,

edit the padding in the Header Element and chose % for the top and bottom padding. This will keep the image responsive.
Make them a total of 26% ( which is the aspect ratios of the About page image ) – should do the trick.

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

[Mark]

Hi David,

I made the top and bottom padding 13% each so they total to 26%, but the hero image still doesn’t seem to be responsive on mobile. I left the right padding at 40px and the left padding at 40px.

Mark

[David]

I cant see those changes on the About page, its still showing the px units that were their before.
Can you check that the settings were saved and if you have any cache plugins please flush them,

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

[Mark]

Thanks David,

I must have not saved it. Works fine now!

Mark

[David]

Awesome – glad to be of help.

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

[Author]

Posts