Make mobile product card images gray edges white

Store Design

Topic summary

A user encountered an issue where product card images on their Shopify store displayed gray edges on mobile devices, despite successfully making these edges white on desktop. The product cards use a square aspect ratio with contained images.

Problem Details:

  • Desktop version showed white backgrounds correctly
  • Mobile version displayed unwanted gray edges around product images
  • User had already attempted several solutions without success

Solution Provided:
Two CSS code solutions were offered:

  1. First solution (successful):
@media (max-width: 749px) {
    .card--standard .card__inner:after { background: #fff; }
}
  1. Alternative solution:
@media screen and (max-width: 1023px){
  .card__inner .card__media {
    background-color: #fff;
  }
}

Both solutions target mobile viewports using media queries to change the background color from gray to white.

Resolution:
The issue was resolved using the first CSS solution. The user confirmed it worked successfully and did not need to test the alternative approach.

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

My product card image ratio is set to square and I have the photos contained to that area. I have successfully made the unused area of the square white on the webpage but not on mobile. I’ve tried a couple of things but no luck. Does anyone know how to accomplish this?

IMG_9067.PNG
IMG_9067.PNG1170×2532 272 KB

1 Like
2

Hi @d0ug

Please share the password-protected link to your store so we can check!

3

Hello @d0ug

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

devcoders_0-1745808224610.png
devcoders_0-1745808224610.png1257×540 604 KB

1 Like
4

Please share me your store password so can I figure out for you the reason and solution to fix

5

ahljad

1 Like
6

ahljad

7

Please add this code to Custom CSS in Sales channels > Online Store > Themes > Customize > Theme settings

@media (max-width: 749px) {
    .card--standard .card__inner:after { background: #fff; }
}

Screenshot 2025-04-28 at 09.50.25.png
Screenshot 2025-04-28 at 09.50.25.png878×1052 81.3 KB

1 Like
8

Let try to add this css code to remove gray background :

@media screen and (max-width: 1023px){
  .card__inner .card__media {
    background-color: #fff;
  }
}

Screenshot 2025-04-28 at 09.51.41.png
Screenshot 2025-04-28 at 09.51.41.png845×1008 124 KB

1 Like
9

Thanks!!

I didn’t get to try your solution because the first one worked

10

oh Thank for let me know

11

Thanks!!

It seems to have worked

1 Like
12

You are very welcome!