Making product photo full width on mobile view

Store Design

Topic summary

A user seeks to make product images display at full width on mobile devices for their Shopify store. They shared a screenshot showing the current mobile layout with padding around product photos.

Solutions Provided:

  • First attempt: CSS targeting .product__media-wrapper and .product__media-list with media query for screens under 768px, but this didn’t resolve the issue.
  • Working solution: Custom CSS code targeting multiple elements (.grid--peek.slider, .product__media-item, .slider--mobile) with a 749px breakpoint. This successfully removed margins and adjusted widths using calc(100% + 3rem).

Current Status:
The full-width image issue is resolved. The user now asks a follow-up question about adjusting the spacing between the image slider and the photos themselves, suggesting minor refinement is still needed.

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

Hi guys hope you are having a good day
i got this product page that i want to make the photos be full width on mobile view.
this is how the store currently look on mobile view.
store link: Bresh
pass: hugegyat
refresh theme
Thank you in advance

image
image468×884 88.8 KB

1 Like
3

Hi @Bresh_store,

1. Go to Online Store → Theme → Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

@media screen and (max-width: 768px) { 
 .product__media-wrapper { 
 padding-left: 0; 
 padding-right: 0; 
 } 
 .product__media-list { 
 width: 100%; 
 } 
}

Thank you!

4

Hi thank you so much but your code dosnt change anything

5

You should allow someone come in for you, maybe it’ll be solved

6

Well where can i find one?

8

Please add this code to Custom CSS of theme settings

@media (max-width: 749px) {
   .product .grid--peek.slider .grid__item:first-of-type { 
        margin-right: 0 !important; 
    }
   body .product__media-list .product__media-item {
        width: calc(100% + 3rem);
    }
   .product .slider.slider--mobile {
        scroll-padding-left: 0;
        max-width: calc(100% + 3rem);
        gap: 0;
    }
}

Screenshot 2025-10-23 at 10.22.35
Screenshot 2025-10-23 at 10.22.35880×1048 138 KB

Best regards,
Dan from Ryviu: Product Reviews App

9

That worked thank you, anyway i can make the image slider closer to the pictures?