Remove side padding on product page

Store Design

Topic summary

A user seeks help removing side and top padding from their Shopify product page, sharing a link and screenshot showing unwanted spacing around product images.

Initial Solutions Attempted:

  • Two users provided CSS code snippets to be added to the theme.liquid file before the </head> tag
  • The first attempt failed, prompting a corrected code solution
  • A third user provided template-specific CSS that successfully removed the padding

Complications:

  • The working solution inadvertently affected other pages beyond just the product page
  • Screenshots revealed unintended layout issues on additional pages
  • The user requested asymmetric padding: zero on the left, minimal on the right (specifically for the buy button and product info)

Resolution:

  • Additional CSS targeting .page-width with media queries was suggested but didn’t fully resolve the issues
  • Status: Resolved - The original poster ultimately found their own solution after the back-and-forth troubleshooting
Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

Hi, guys!

Can someone please help me remove side padding on product page? Also top padding. I have tried everything and nothing seems to work :disappointed_face:

image.jpeg
image.jpeg400×223 9.67 KB

Here is the link to the page -

https://rustmademe.com/products/irregular-shaped-plant-box-l

Thanks so much! :slightly_smiling_face:

1 Like
2

Hi @user7777

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!

3

Sorry, but this didn’t work :disappointed_face:

4

@user7777 An extremely sorry for this, I updated the code

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!

5

@user7777

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before 
{% if template.name == 'product' %}

{% endif %}

Thanks!

[email removed]

6

Thanks so much! It finally worked! :slightly_smiling_face:
Could you please help me edit the code to add a small padding on right side only? Because they buy button and rest product info is now withput padding on right side.

Thanks again :slightly_smiling_face:

7

@user7777

can you share screenshot what you want i can help you!

Thanks!

8

Oh, but I just realised it made some mistakes to all page…

IMG_5611.jpg
IMG_5611.jpg1179×645 33.5 KB

IMG_5610.jpg
IMG_5610.jpg1179×652 56 KB

9

@user7777

Please add the following CSS code to your assets/base.css bottom of the file.

@media screen and (min-width: 750px) {
    .page-width {
        padding: 0 5rem !important;
    }
}

Thanks!

10

Unfortunately it didn’t resolve the issues… :disappointed_face:

I need to change padding on sides on product page only! Padding on left should be 0, on the right a little padding. Could you please loook into this?

Thanks!

11

@user7777

Ok please wait i will send solution.

12

Thanks, I already found a solution! :slightly_smiling_face: