Archived topic

How To Make Hero Images Responsive?

3 replies · Started by Monkeys and Mountains on March 29, 2020

Viewing posts 1–4 of 4

March 29, 2020 at 6:48 am #1218376

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

March 29, 2020 at 9:58 am #1218677

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)
    }
}

March 30, 2020 at 2:01 am #1219180

Hi Leo,

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

Please advise.

Thanks,

Laurel

March 30, 2020 at 7:16 am #1219469

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.

This archived topic is closed to new replies.

Start building better websites today.