Remove padding main image on product page

Shopify Discussion

Topic summary

A user seeks to remove left padding from the main product image in desktop view on their Shopify store. They provided a screenshot showing the current layout with visible padding.

Response provided:

  • Achieving full-width images requires customization of the product template and image slider
  • The default padding is intentional, based on image ratio and screen size to ensure proper display across devices
  • For the button spacing issue visible in the screenshot, a CSS solution was offered:
    • Navigate to: Online Store → Edit theme code → base.css
    • Add custom media query CSS targeting .rich-text--full-width .rich-text__buttons with adjusted padding

Status: A partial solution addressing button spacing was provided, though the original request about image padding remains unresolved as the responder recommended keeping the default layout for responsive design purposes.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

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-chakra-face-mask&previewMode=mobile

PW: ellacoker

Screenshot 2025-01-31 at 14.51.54.png
Screenshot 2025-01-31 at 14.51.54.png3840×2400 722 KB

2

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