How can I fix image cropping issues on my mobile home page?

Shopify Discussion
1

Hello, On my home page the images are being cut off. It is only happening on the mobile version. Resizing the images do not work. Shopify support said I can come here to get codes to change the coding. How do i go about this?

2

Hi Nobel,

I assume your mobile device is less than 767px wide So you can use

@media only screen and (max-width: 767px) {
  .your-image-container-class { /*Change the class of your image as you need*/
  object-fit: cover; /* Ensure the image covers the entire container, maintaining aspect ratio */
  width: 100%; /* Image width will be the width of the parent container to 100%  adjust as needed */
  height: 300px; /* Image height will be 300px, adjust as needed */
  }
}

Try this out, if you have anything let me know

BR,
Keshan

3

Hello @NobleNest

This is Amelia at PageFly - Shopify Advanced Page Builder app.

I believe this issue occurs because the current image of you has a 16:9 aspect ratio. This means it displays well on desktops, but when viewed on mobile devices with a 9:16 aspect ratio, the image is cropped. This can be difficult to edit because it affects the original image. You can either create a new image that fits both mobile and desktop, or create one image for mobile and one for desktop.

Hoping my solution helps you solve your problem.

Best regards,

Amelia | PageFly