How can I add a margin in the Dawn theme?

Store Design
, , ,

Topic summary

A user seeks guidance on adding margins to sections in Shopify’s Dawn theme. They provide preview links showing their current layout.

Solution provided:

A PageFly representative offers a CSS-based fix with these steps:

  1. Navigate to Online Store → Theme → Edit code
  2. Locate the base.css file
  3. Add custom CSS code at the bottom of the file targeting .shopify-section elements with a media query for screens up to 767px width, applying a 10px margin

The solution uses CSS to create spacing around theme sections, specifically optimized for mobile/tablet viewports. The discussion appears resolved with a straightforward code implementation.

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

HI @Smultronetshop

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

@media (max-width: 767px){

.shopify-section {

margin: 10px !important;

}
}

Hope that my solution works for you.

Best regards,

Henry | PageFly

1 Like