Image issues on mobile

NobleNest
Visitor
1 0 0

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?

Replies 2 (2)

Keshan97
Shopify Partner
55 9 21

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
 
Best Regards,
Keshan Vishwajith
Shopify Certified Theme Developer
Feel free to drop me an email

PageFly-Amelia
Pathfinder
115 38 43

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.


Optimize your store’s mobile shopping experience with the Blum theme.