Change image view

[NikosBat]

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

I want this image above to be like this image below

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

[Bundler-Manuel]

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);
}
}

[NikosBat]

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

[websensepro]

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! (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!

[NikosBat]

Thanks for your answer Websensepro, that has solved my problem