Change image view

Shopify Discussion

Topic summary

A Shopify user needed to make product images display full-width on mobile devices, removing the default left and right padding. The user provided screenshots showing the current padded view versus the desired full-width appearance.

Attempted Solutions:

  • An initial CSS solution targeting .product--thumbnail_slider was provided but did not resolve the issue.

Working Solution:
A second CSS code snippet was shared that successfully solved the problem by:

  • Setting grid items to 100% minimum width on mobile screens (max-width: 749px)
  • Removing padding from the page-width container
  • Using !important declarations to override existing styles

The code should be added to the theme’s CSS file (theme.css or base.css) through the Shopify theme editor.

Status: Resolved - the user confirmed the second solution worked.

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

Hello guys, I want my main image view in mobile to be full width, here is an example.

Bildschirmfoto 2025-01-14 um 07.33.58.png
Bildschirmfoto 2025-01-14 um 07.33.58.png640Ă—1182 290 KB

I want this image above to be like this image below

Bildschirmfoto 2025-01-14 um 07.34.45.png
Bildschirmfoto 2025-01-14 um 07.34.45.png646Ă—1118 400 KB

As you can see the second image is full width and do not have any padding at the right and left side

2

Hi there @NikosBat Check out this code and let me know if it works for you

Please use this code in CSS file
@media screen and (max-width: 750px) {
.product.product–thumbnail_slider.product–mobile-show .grid__item.product__media-wrapper {
left: -1.5rem;
width: calc(100% + 3rem);
max-width: calc(100% + 3rem);
}
}

1 Like
3

Hello Bundler-Manuel and thanks for replying, this code did not work for me

4

Hi @NikosBat

  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(max-width:749px){
.grid--peek .grid__item {
        min-width: 100% !important;
}
.section-template--22800324755788__main-padding .page-width {
    padding: 0 !important;
}
}

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
Use our Big Bulk Discount app to boost your sales! :rocket: (https://apps.shopify.com/big-bulk-discount). Easy to set up and perfect for attracting more customers with bulk discounts. Try it now and watch your revenue grow!

1 Like
5

Thanks for your answer Websensepro, that has solved my problem