[Support request] How To Make Hero Images Responsive?

Home Forums Support [Support request] How To Make Hero Images Responsive?

Home Forums Support How To Make Hero Images Responsive?

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1218376
    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

    #1218677
    Leo
    Staff
    Customer Support

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

    #1219469
    David
    Staff
    Customer Support

    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.

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.