Palo Alto theme - Make product image full with and no paddings

[zlati84]

Hello,

I am using the Palo Alto theme. I want to make the main product image on product page full width on both sides but just for mobile. For desktop i want to stay as it is. Also no padding on the top. You can see from the picture. I have marked with red the white spaces I want removed.

Also I tried some solutions and all images on the page became full width. I want just the product image.

Best,

Zlati

[CodingFifty]

Hi @zlati84,

Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css/main.css/custom.css file Add the provided code at the end of the file.

@media (max-width: 768px){
.product-single__gallery{
    width: 115% !important;
    margin-left: -20px !important;
}

.product-single{
     overflow: hidden !important;
}
}

[zlati84]

Hi, thank you that worked great for the side paddings but also want the padding on the top of the product. - see picture

[CodingFifty · Accepted solution]

Try this code @zlati84 

@media (max-width: 768px){
.product-single__gallery{
    width: 115% !important;
    margin-left: -20px !important;
}

.product-single{
     overflow: hidden !important;
}

#productTemplate--template--23010168439113__main {
    padding-top: 0px !important;
}
}

[zlati84]

worked like a charm! Excellent! thank you!