Remove padding main image on product page

Remove padding main image on product page

ellacoker
Tourist
111 0 15

Hello,

I would like to remove the padding to the left of the main image in desktop view on the product page. Is anyone able to help me?

Ella.

URL: https://admin.shopify.com/store/wss10u-is/themes/175807824166/editor?previewPath=%2Fproducts%2Froot-...

PW: ellacoker

 

Screenshot 2025-01-31 at 14.51.54.png

Reply 1 (1)

ChiragPatel2911
Shopify Partner
49 7 5

@ellacoker 

 

If you want the image with full width then there needs to be some customization on your product template with product image slider.

I preferred to use it with default cause it is based on the ration and the screen size. Like if you have smaller screen then it will be like this https://prnt.sc/7-kaNmdBmQ1b


https://prnt.sc/tk7hXdniQsjC for this button space you can add a custom CSS in your CSS file.

You can add a custom CSS under your theme file.

Go to the Online Store -> Edit your theme code and find the base.css

@media(max-width:768px){
.rich-text--full-width .rich-text__buttons {
padding-top: 20px;
}
}

 

Add this CSS at the end of that base.css file and save it. I hope that works for you.

Best Regards,
Chirag Patel (COO - Cirkle Studio PVT LTD)
chirag@cirklestudio.co