How can I optimize mobile product picture layout for full screen view?

Store Design
,

Topic summary

A Shopify store owner seeks to make product images fill the entire mobile screen width, eliminating white space on the sides.

Initial Problem:

  • Product photos on mobile display with visible gaps, showing portions of adjacent images
  • Store URL provided with password for troubleshooting access

Attempted Solutions:

  • Two support representatives (Dan-From-Ryviu and BSS-Commerce) provided CSS code snippets
  • Initial attempts involved adding code to base.css file targeting .product__media-list and .slider--mobile elements
  • Early solutions failed to resolve the issue, with left-side spacing persisting

Resolution:

  • After multiple iterations and code adjustments in the theme.liquid file (lines 295-304), Dan-From-Ryviu’s final CSS solution successfully eliminated the spacing
  • The fix required media queries for mobile screens (max-width: 749px) with specific width and scroll-padding properties
  • Store owner confirmed the solution worked perfectly

Status: Resolved. The product images now display full-width on mobile devices as intended.

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

Hi there,

URL: andrejewelry.com

Password: Thankyouverymuch121

I would love the pictures on the product page on mobile to fill the whole screen. Now you can see some parts of other pictures:

Screenshot 2023-11-22 at 3.24.00 PM.jpg
Screenshot 2023-11-22 at 3.24.00 PM.jpg806×1292 103 KB

Thanks!

2

Hi @AndreaHuang

Please go to your Online store > Themes > Edit code > open theme.css file, add this code before tag
3

Hi @AndreaHuang ,

Here is the solution to your problem.

  1. Open your theme, Edit code, search for the base.css file

  2. Paste the following code to the end of your file:

@media screen and (max-width: 749px) {
    #MainContent .slider.slider--mobile {
        scroll-padding-left: unset;
    }
    #MainContent .product__media-list .product__media-item {
        width: calc(100%);
    }
}
  1. And then click Save button and you will get the result:

view - 2023-11-23T161236.013.png
view - 2023-11-23T161236.013.png475×854 109 KB

Hope it helps @AndreaHuang

4

Nothing changed here:(

5

Hi I tried but nothing changed:(

6

My mistake. Please add code to theme.liquid file before tag.

Result

Screenshot_1.jpg
Screenshot_1.jpg431×651 13.5 KB

7

Hey @AndreaHuang ,

Paste this code to the end of your base.css file:

@media screen and (max-width: 749px) {
    .slider.slider--mobile {
        scroll-padding-left: unset !important;
    }
    .product__media-list .product__media-item {
        width: 100% !important;
    }
}
8

@BSS-Commerce Still nothing changed :disappointed_face:

9

Hi It becomes like this. The right is good but left side still has

IMG_8995.jpg
IMG_8995.jpg1179×2056 82.8 KB

space.

10

Could you add the cde again so I can help you to check?

11

Just added! From line 295 to 304 in the theme.liquid file

Screenshot 2023-11-24 at 11.56.21 AM.png
Screenshot 2023-11-24 at 11.56.21 AM.png942×408 47.3 KB

12

Please try to update code to this and check again
13

Just updated! Still can see the previous picture from on the left side

IMG_391894F6A682-1.jpeg
IMG_391894F6A682-1.jpeg1179×2126 127 KB

14

Hi @AndreaHuang

Please update the code and check again.
1 Like
15

@Dan-From-Ryviu This is perfect! Big big thanks :heart:

1 Like
16

@AndreaHuang , you are very welcome :heart: