Re: Remove padding around product page image

Solved

How can I eliminate padding around my product page image?

SvetShopifies
Tourist
8 0 3

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

Accepted Solution (1)
ZestardTech
Shopify Expert
5624 1024 1352

This is an 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;
}
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

View solution in original post

Replies 12 (12)

ZestardTech
Shopify Expert
5624 1024 1352

Hello There,

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

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
SvetShopifies
Tourist
8 0 3

dmwwebartisan
Shopify Partner
12321 2551 3715

@SvetShopifies 

Please share your store URL.

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
SvetShopifies
Tourist
8 0 3

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

More precise url to the product page

ZestardTech
Shopify Expert
5624 1024 1352

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;
}
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
SvetShopifies
Tourist
8 0 3

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
Shopify Partner
12321 2551 3715

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

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
SvetShopifies
Tourist
8 0 3

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

ZestardTech
Shopify Expert
5624 1024 1352

This is an 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;
}
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
SvetShopifies
Tourist
8 0 3

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
Tourist
12 0 0

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
Shopify Partner
12321 2551 3715

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

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app