Hi,
How do I reduce the side padding for a ‘page’ section on the homepage?
Topic summary
A user seeks to reduce side padding in the ‘Page’ section on their Dawn theme homepage.
Two solutions provided:
-
Direct CSS editing: Add custom CSS to the
base.cssfile in the theme code editor, targeting the specific section class with reduced padding and adjusted max-width. -
Recommended approach: Use Shopify’s built-in custom CSS feature by navigating to Customize > Pages > Default page > Page section, then adding CSS to modify
.page-width--narrowwith a custom max-width percentage (currently 90%, adjustable to 75%, 80%, 85%, etc.).
The second method is preferred as it avoids directly editing theme files. The user confirmed the solution worked by thanking the contributor.
Hi @dan_hoo ,
This is Richard from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/base.css->paste below code at the TOP of the file:
.section-template--17969930666304__c56afdc7-5556-4aff-9696-c045ad5e8c55-padding {
max-width: 1000px !important;
padding: 0 15px 40px !important;
}
I hope it would help you
Best regards,
Richard | PageFly
Hi,
Now Shopify has better solution to add custom CSS without adding to base.css (or theme.css, style.css) file.
Please go to Customize > Pages (Top center, under Homepage) > Default page > Page (on the left menu > Click custom CSS
Add the code below to the custom css field.
.page-width--narrow {
max-width: 90%;
}
You may change the max-width setting (currently 90%) to 75%, 80%, 85%, etc. to fit your needs.
Hope it helps.
Thanks @DavidEKim