How to get rid of the gap in Product image slider?

Store Design
,

Topic summary

A user needed help removing white gaps around product images in a mobile slider view on their Shopify store.

Solution Provided:

  • Custom CSS code targeting mobile devices only
  • Code adjusts .product-media-container max-width to 100%
  • Removes borders from .global-media-settings
  • Should be added between <style> tags in the theme

Implementation Notes:

  • Tested successfully on Google Chrome mobile
  • User advised to clear cache after applying changes
  • Recommendation to check for conflicts with other site areas

Outcome: The solution worked successfully for the original poster.

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

Hi guys,

I’m trying to get rid of the white gap between Product image (and also the gaps on bot right/left side) in Slider in mobile view.

My url (please access with mobile): https://189ee3-2.myshopify.com/products/jacket

Thank you so much.

1.jpg
1.jpg1242×2120 347 KB

2

The following codes should work for you. Such fine adjustments are not found in themes and manual intervention is required. I’ve put in some effort for you. I hope it serves your purpose!

These codes will only work on mobile. I recommend checking for any conflicts with other areas after testing.

Add these between the tags. Or simply add the contents of the section to your CSS and clear the caches. I’ve tested it on Google Chrome and it worked seamlessly.

If you have any questions, feel free to ask!

@media (max-width: 771.98px){ .global-media-settings { border: none!important; } .product-media-container { max-width: 100%!important; } }

Terence Keane

Kind regards,

3

It worked! Thank you :folded_hands: :grinning_face:

4

glad to hear that :ok_hand: