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

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

Home Forums Support Responsive Hero Header – Image Not Shrinking on All devices.

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

    #1526438
    David
    Staff
    Customer Support

    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.

    #1526601
    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!!

    #1526664
    David
    Staff
    Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.