Mobile view on product page full width of screen

Store Design
1

Hi, is there a way to make the product image the full length of screen on mobile view so there is no margin on left or right?
https://lesbrons.com/collections/all-products-sorted/products/white-jacket
password: sandwich

have attached an image of how it looks on mobile

Screenshot_20210828-212444_Chrome.jpg
Screenshot_20210828-212444_Chrome.jpg720×1600 72.4 KB

2

@lesbrons

Please add the following code at the bottom of your assets/stylesheet.css file.

@media screen and (min-width:500px) {
.gridlock .row {width: 100% !important;}
}

Thanks!

3

hi, thanks for the reply. this is only for screens not on mobile.

I tried to change code to this:

@media screen and (max-width: 728px) {
.gridlock .row {width: 100%; padding: 0px !important;}
}

But it changes the margins on every single page not just the product image. do you know if theres a way to just have it affect only the product images?

4

does anyone know if there’s a way to do this without affecting the code on every page?

5

hii, @lesbrons
Paste this code on the top of the stylesheet.css file.

.span-12.auto {
    width: 108% !important;
    margin-left: -13px !important;
}

Thank You.

6

Hi, thanks for your reply. I tried the code but it also affected some of my navigation on other pages and made the image on web view look funny because it half cropped out the zoom icon. I tried to add the code that would only have it for mobile view at the front:

@media screen and (max-width: 728px)

But then this seemed to just stop it working completely on my mobile view.