How To Make Hero Images Responsive?

[Monkeys and Mountains Adventure Travel]

Hi,

I’m trying to make all my hero images responsive and have tried adjusting the padding as you’ve suggested to other users having the same issue with it not appearing properly on mobile but it’s not working.

Can you please advise how, as soon as possible?

I created a test page as I need the real page to have an image that actually looks OK on mobile but I don’t like how it looks having the text as separate which is why I want to make it work using the hero image.

Thanks for your help,

Laurel

[Leo]

Hi there,

Background images are responsive by nature – it’s not a theme thing or page hero thing.

Maybe we could try switching out the image for mobile screen only?

@media (max-width: 768px) {
    body.page-id-1043168 .page-hero {
        background-image: url(https://MOBILE-BACKGROUND-IMAGE)
    }
}

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

[Monkeys and Mountains Adventure Travel]

Hi Leo,

Thanks for this. I added it, but the image still doesn’t appear properly on mobile.

Please advise.

Thanks,

Laurel

[David]

Hi there,

for the image to be in full view across all device sizes the Header Element must have the same aspect ratio as the Background Image. Problem you have is the Height of the Header Element is increasing as the device gets narrower because of the large font sizes and the 50% wide column.

Can you adjust the font sizes and the column width until it displays how you like it on Mobile. Then we can help with changing those inline styles to some CSS to apply only to mobile.

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

[Author]

Posts