Reduce Padding On Product Page Margins - Dawn Theme

Store Design
,

Topic summary

A user seeks to reduce side padding on their Shopify Dawn theme product page to widen the product description column while keeping product images the same size. They provide before/after screenshots showing the desired layout change.

Attempted Solutions:

  • Initial suggestion to add CSS code to theme.liquid file’s </body> tag proved unsuccessful
  • Implementation issues arose around proper code placement
  • Collaboration challenges mentioned due to lack of store access for troubleshooting

Resolution:
The issue was resolved by adding custom CSS to the base.css file:

#MainProduct--template-[ID] {
  --page-width: 200rem !important;
}

The user successfully implemented this solution, adjusting the value as needed. An alternative media query approach targeting .page-width padding was also suggested but not confirmed as the final solution.

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

Hi,

I want to widen reduce the padding on the side of my product page such that the product images stay the same size but I am able to have a wider column for the product description.

I want it to go from 1.

Screen Shot 2024-05-29 at 5.18.30 am.png
Screen Shot 2024-05-29 at 5.18.30 am.png2144Ă—1536 412 KB

To 2.

Screen Shot 2024-05-29 at 5.17.16 am.png
Screen Shot 2024-05-29 at 5.17.16 am.png2148Ă—1398 434 KB

URL: https://www.vntura.com/products/ultra-light-down-puffer-jacket
Pwd: taylte

Thanks!

2

@kingbeanz Go to edit code > open theme.liquid file > find for tag and paste below code
1 Like
3

Hi,
Thanks for trying! But nothing happened :disappointed_face:

4

I checked your code you didn’t placed the code in the file so how it will work?

5

I did try but then I deleted. I put back now so you can see.

6

Without access I can’t help you because I have to change the code for effecting the store.

7

So what you’re saying is that it’s not an easy fix?

8

Hello @kingbeanz ,

Please add the code into base.css file.

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

Thanks for your help everyone, I actually figured it out:

Adding this to base.css works wonders.

#MainProduct-template–22649331319059__main {
–page-width: 200rem !important; /* Adjust the value as needed */
}