Product Grid On Mobile Is Cutting Off Product Images

Technical Q&A
,

Topic summary

A Dawn theme user reports product images being cut off in the Product Grid on mobile devices, while desktop displays correctly. The Image Ratio attribute in the Product Card section doesn’t resolve the issue—images remain rectangular regardless of settings (Adapt to Image, Portrait, or Square).

Troubleshooting attempts:

  • Support confirmed the grid displays properly in their testing environments (real system and BrowserStack)
  • Issue persists on Samsung device using Chrome and matches the Store Editor preview
  • Problem also reproduced on a friend’s iPhone, ruling out device-specific issues
  • User had made previous code modifications to the theme

Resolution:
The user resolved the issue by adding custom CSS targeting the card elements with a media query for screens up to 768px width, setting fixed dimensions of 160px for both height and width on .card--card and .card--standard .card__inner classes.

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

Hi all,

I can’t get my full product images to display in the Product Grid on mobile. No problem on web. I am using Dawn theme. There is a Product Card section when selecting Product Grid that has an Image Ratio attribute. Regardless of what I select (Adapt to Image, Portrait, or Square), the image stays as a rectangle. Let me know if you have any ideas to try. Thanks in advance!

Shopify Product List Image Problem.png
Shopify Product List Image Problem.png1173×663 147 KB

1 Like
2

@Rampz

Welcome to the Shopify community!
and Thanks for your Good question. :blush:

Please share your site URL,
So I will check and provide a solution here.

3

Thanks @KetanKumar , on mobile, go to Products – Rampz (rampzgame.com)

However, I currently am hiding the Product Grid on mobile since it has issues. Do I need to unhide it for you first?

1 Like
4

@Rampz

We have checked for this issue in real system and browserstack but it is working ok. In which system configuration or browser you are checking?

5

@KetanKumar I am on a Samsung using Google Chrome and confirmed the display is same problem as the preview when in the Store Editor

1 Like
6

@Rampz

yes please confirm this look!

KetanKumar_0-1725508252878.png
KetanKumar_0-1725508252878.png538×838 392 KB

7

@KetanKumar Yes that is what it should look like. Does not look like that on my phone (Samsung 24+) currently

1 Like
8

@Rampz are you change any code? or if don’t change code just try again fresh theme

9

@KetanKumar There are few things I have updated code for in this theme. Had a friend check on their iphone and they see same problem as I do.

10

FYI, this is the code I ended up adding to the element’s custom css to fix the issue:

@media (max-width: 768px) {
.card–card,
.card–standard .card__inner {
height: 160px;
width: 160px;
}
}