How can I eliminate padding around my product page image?

[SvetShopifies]

I would like to remove the padding from around the product page image, however, after hours of trial and error I wasn't able to accomplish anything, please help!

[ZestardTech]

Hello There,

Please share your store URL and screenshot.
So that I will check and let you know the exact solution here.

[SvetShopifies]

https://sunsetparadiselamps.com/ 

This is the url

[dmwwebartisan]

@SvetShopifies 

Please share your store URL.

[SvetShopifies]

https://sunsetparadiselamps.com/products/sunset-lamp

More precise url to the product page

[ZestardTech]

Hello there.

1. Go to Online Store->Theme->Edit code
2. Asset->/styles.scss.css.liquid->paste below code at the bottom of the file.

@media screen and (max-width: 749px){
.product .product .product_gallery {
margin-bottom: 10px;
}
.product .main.content {
padding-top: 0;
}
}

[SvetShopifies]

Just did this, it did move the image up and centered it out a little more, however, I want it to be flush to the edges. Is that possible?

[dmwwebartisan]

@SvetShopifies 

Please add the following code at the bottom of your assets/styles.scss.liquid file.

@media only screen and (max-width: 480px){
.product .container { width: 100% !important; padding: 0px !important; margin-top: -25px; }
}

Hope this works.

[SvetShopifies]

@dmwwebartisan  if I do this the whole page's text gets disrupted and is too close to the edge. 

[ZestardTech · Accepted solution]

Hello there.

1. Go to Online Store->Theme->Edit code
2. Asset->/assets/styles.scss.liquid->paste below code at the bottom of the file.

@media screen and (max-width: 749px){
.product .gallery-wrap {
width: 100vw;
margin-left: -50vw;
left: 50%;
position: relative;
}
}

[SvetShopifies]

This one was it, I just added margin-top: -55px; to it as well so it moves up, thank you so much for the help!

[DorianvdSpcd]

Hi there I'm currently facing the same obstacle, unfortuantly it no longer seems to work during 2024 and I'm not sure if you still help people as you've done over here. Anyways I was wondering if by any chance you have an up-to-date code for the exact same obstacle for me? If it helps, It's mainly focussed on mobile and I am using the Dawn theme.

[dmwwebartisan]

@SvetShopifies 

Try this first.

@media only screen and (max-width: 480px){
.product .container { width: 100% !important; padding: 0px !important;}
}

Let me know if this works.