Product card Background Image full width

Store Design
,

Topic summary

A user seeks help removing colored background padding around product card images, wanting images to display at full width instead.

Initial Issue:

  • Product card images show visible background color margins rather than filling the entire card width
  • Affects collection/product page display

Solution Provided:
CSS code added to base.css file (Shopify Admin → Online Store → Theme → Edit code):

  • First fix targets .card--standard .card__media with margin: 0, width: 100%, and border-radius properties
  • User confirms this resolves the initial problem

Follow-up Issue:

  • Same padding problem appears in the product grid layout
  • Additional CSS provided targeting .card .card__inner .card__media with identical styling properties

Status: Solution successfully implemented for product cards; grid fix provided but not yet confirmed.

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

Hi,

I would like the photos of the products cards to be seen in full width and that the background of another color is not seen. can you help me I attach photo.

Screenshot 2025-01-25 154906.png
Screenshot 2025-01-25 154906.png1210×239 96 KB

2

@Juanchila0 Can you please share this page link?

3

purasmile.it

4

@Juanchila0 please add this css to the very end of your base.css file and check,
Shopify Admin → Online Store ->Theme → Edit code → base.css

.card--standard .card__media {
    margin: 0 !important;
    width: 100% !important;
    border-radius: var(--border-radius) !important;
}
5

Thanks it worked.

I have the same issue in the product grid:

Juanchila0_0-1737818808961.png
Juanchila0_0-1737818808961.png627×495 74.4 KB

6

@Juanchila0 - add this

.card .card__inner .card__media {
    margin: 0 !important;
    width: 100% !important;
    border-radius: var(--border-radius) !important;
}
1 Like