How to reduce padding on left/right side of multicolumn Dawn Theme

Store Design
, ,

Topic summary

A user seeks to reduce left and right padding on a multicolumn section in the Dawn theme, specifically wanting the CSS to apply only to that section rather than site-wide.

Solutions Attempted:

  • Multiple CSS code snippets were provided to add to base.css, targeting .page-width, .content-container, and .multicolumn-card elements
  • Initial codes worked but applied changes globally across the entire website
  • Attempts to add CSS directly to the section’s Custom CSS field failed with “At-Rules not supported” error

Current Status:

  • The discussion remains unresolved
  • The user successfully reduced padding site-wide but still needs a section-specific solution
  • Custom CSS section doesn’t accept the provided code due to technical limitations
  • One contributor suggested using the Theme Customize section’s Custom CSS for that specific section, but implementation details weren’t confirmed

Key Challenge: Finding CSS that targets only the specific multicolumn section without affecting other parts of the website, while working within Dawn theme’s Custom CSS constraints.

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

Hello @rjluna

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottom of the file:
.multicolumn-card.content-container {
width: 100%!important;
}
.page-width {
max-width: 100%;
}