Change image view

Solved

Change image view

NikosBat
Explorer
332 0 49

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

 

 I want this image above to be like this image below

 

Bildschirmfoto 2025-01-14 um 07.34.45.png

 

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

 

Accepted Solution (1)

websensepro
Shopify Partner
1854 215 261

This is an accepted solution.

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!

Need a Shopify developer? Hire us at WebSensePro For Shopify Design Changes/Coding
For Free Tutorials Subscribe to our youtube
Get More Sales Using Big Bulk Discount APP
Create Your Shopify Store For Just 1$/Month
Get More Sales Using Big Bulk Discount APP

View solution in original post

Replies 4 (4)

Bundler-Manuel
Trailblazer
675 31 79

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

Emmanuel
Please let me know if it works by marking it as a solution!
Bundler - Product Bundles app, a great bundle app for Shopify, with glowing user testimonials and a free plan.
NikosBat
Explorer
332 0 49

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

websensepro
Shopify Partner
1854 215 261

This is an accepted solution.

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!

Need a Shopify developer? Hire us at WebSensePro For Shopify Design Changes/Coding
For Free Tutorials Subscribe to our youtube
Get More Sales Using Big Bulk Discount APP
Create Your Shopify Store For Just 1$/Month
Get More Sales Using Big Bulk Discount APP
NikosBat
Explorer
332 0 49

Thanks for your answer Websensepro, that has solved my problem