How can I eliminate padding around my product page image?

Store Design
1

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!

Screen Shot 2021-09-13 at 4.33.58 AM.png
Screen Shot 2021-09-13 at 4.33.58 AM.png754×1366 177 KB

2 Likes
2

Hello There,

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

3

@SvetShopifies

Please share your store URL.

4

https://sunsetparadiselamps.com/

This is the url

5

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

More precise url to the product page

1 Like
6

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

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?

8

@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.

9

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

IMG_E138544F7C4D-1.jpeg
IMG_E138544F7C4D-1.jpeg1125×2436 215 KB

10

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;
}
}
1 Like
11

@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.

12

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!

13

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.