Make product image take up full width on mobile - Turbo theme

Solved
Highlighted
Tourist
13 0 1

Hi,

I am using the Turbo theme and I want product images on mobile to have 0 margin on all sides but unfortunately I cannot figure out how to achieve this. The website is marmeladecat.com/products/iphone-11-pro-max-skins

 

Thank you for your help!

0 Likes
Highlighted
Globetrotter
626 60 67

only product image will not take 100% space, entire body will be expanded as image is strictly bound in container and will be 100% only if container is 1000%, making other content to expand as well

you are welcome to contact me.
My email - suyash.patankar@gmail.com
0 Likes
Highlighted
Tourist
13 0 1

Thanks for the reply. Is there no way to make the image break out of the container? There are other parts of the website that take up full width, so why can't this too?

0 Likes
Highlighted

Success.

Globetrotter
626 60 67

@Mehrwest wrote:

Thanks for the reply. Is there no way to make the image break out of the container? There are other parts of the website that take up full width, so why can't this too?


image will bit zoom up, try this, if you like keep it, else remove

 

add this css to end of your styles.scss file

 

@media screen and (max-width:749px){

.product-template .product_gallery{margin-left: -5vw; margin-right: -5vw;}
}
you are welcome to contact me.
My email - suyash.patankar@gmail.com
0 Likes
Highlighted
Tourist
13 0 1

This looks very good but now I the page is scrollable on the x-axis (when you scroll down, you scroll a little to the right too). Do you know how to fix this?

0 Likes
Highlighted
Globetrotter
626 60 67
not able to see it , can you put the code?
you are welcome to contact me.
My email - suyash.patankar@gmail.com
0 Likes
Highlighted
Tourist
13 0 1

I put it in now.

0 Likes
Highlighted
Globetrotter
626 60 67
I can not see scroll on x
you are welcome to contact me.
My email - suyash.patankar@gmail.com
0 Likes
Highlighted
Tourist
13 0 1
If you are on mobile, swipe from right to left, you will see that it is scrollable although it shouldn’t be.
0 Likes
Highlighted
Globetrotter
626 60 67
I checked both ways, could not see it
you are welcome to contact me.
My email - suyash.patankar@gmail.com
0 Likes