How can I prevent images from stretching on mobile?

Store Design

Topic summary

A user is experiencing an issue where images stretch horizontally on mobile devices.

Another community member offered to provide a CSS solution if the site domain was shared. The user provided their Shopify preview link.

Proposed Solution (from GemPages):

  • Navigate to: Online Store → Theme → Edit code
  • Open styles.css in the Assets folder
  • Add CSS code at the end of the file targeting #product-image-grid img with object-fit: cover !important within a media query for max-width 767px

This CSS fix should prevent images from stretching on mobile by controlling how they fit within their containers. The issue remains unconfirmed as resolved.

Summarized with AI on November 23. AI used: claude-sonnet-4-5-20250929.
1

Please help, need to make the image not stretch out horizontally on mobile.

s3.JPG
s3.JPG479×911 56.3 KB

2

please share your Domain i will give you perfect CSS solution

3

@wnt1987 here is the link: https://s1os9837vonuvjho-21603111.shopifypreview.com/collections/play-new-arrivals

4

Hi @Janamir

I would like to give you a solution to support you.

  1. Go to Online Store → Theme → Edit code.

  2. Open your styles.css in the Assets folder.

  3. Paste the below code at the end of the file.

@media (max-width: 767px){
img#product-image-grid {
    object-fit: cover !important;
}
}

Best regards,
GemPages Support Team