How can I make my product image full width on mobile only?

Store Design
, ,

Topic summary

A user seeks CSS code to remove padding and make product images full-width on mobile devices only for their Shopify store. They provided a store URL and visual examples showing the desired layout change.

Proposed Solution:
A CSS snippet targeting screens under 749px was shared, modifying .grid--peek.slider and .product__media-list classes to eliminate left margins and set images to 100% width.

Current Status:

  • One user confirmed the solution worked
  • Two others reported issues: one stated it didn’t work at all, another noted it only fixed the first image while subsequent images still show left padding and a sliver of the previous image
  • The solution provider requested store URLs from users experiencing problems to troubleshoot further

The discussion remains open with unresolved implementation issues for some users.

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

Hello community!

I am currently building my product page, and I’m trying to make the main product image have no padding/ be full width on mobile only.

Look at the images below for a visual presentation of what I’m looking to do.

Store = https://petnshop.ca/products/original-calming-dog-bed

have a great day!

IMG_1278.jpeg
IMG_1278.jpeg1179×2556 273 KB

2

Hi @PetNShop

This is Mike from Omega

You can try my solution:

  1. Open Theme → Edit Code

  2. Open base.css or theme.css in Assets folder and paste code below to the bottom of file

@media screen and (max-width: 749px) {
.grid--peek.slider li.grid__item:first-of-type {
    margin-left: 0; 
}
.product__media-list li.product__media-item {
    width: 100%;
}
}

Hope my answer will help you.

Mike from Omega

3

sorry but this doesnt work

4

THANK YOU

5

This worked for the first image but not the subsequent images where you see padding on the left and a small sliver of the prior image. How do I fix this? Thanks!

6

hi @JCL28 , @zlati84
Could you leave your store URL or send me a private message if you do not want to public it, then I can check it for you?