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.
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 */
}