[Support request] On mobile the header image crops instead of scaling.

Home Forums Support [Support request] On mobile the header image crops instead of scaling.

Home Forums Support On mobile the header image crops instead of scaling.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #1661195
    Ben

    My header looks good on desktop but on tablets and mobile, the header image gets cropped instead of scaling to fit the width. Can you help me?

    URL: https://ggj.98d.myftpupload.com/

    Thank you!

    Ben

    #1661210
    Elvin
    Staff
    Customer Support

    Hi there,

    I’m not sure I understand what you mean. By header image, did you mean the page-hero’s background-image?

    If so:

    Your background-image’s background-size property is set to cover.

    cover value resizes the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges.

    What happens in smaller viewports is, it covers the whole height of the container but to keep the aspect ratio, it crops/cuts the side edges of the image.

    If you change from cover to contain, your images wont get cropped but the whole .page-hero container won’t be covered.

    While you can go for percentages values (ex: background-size: 100% 100%), this isn’t good because it will distort the image as it won’t keep the aspect ratio. You’ll most likely have a vertically or horizontally stretched image if you use this.

    That said, there’s no way to avoid the background image from being cropped on narrow width viewports while keeping the whole page-hero covered without breaking aspect ratio.

    A wise man once said:
    "Have you cleared your cache?"

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