Hi,
How can I widen the entire home page in Dawn Theme?
Basically to narrow the gap by about half.
Thanks!
Topic summary
Goal: Reduce the side gaps and widen the Dawn theme home page.
Key steps proposed and implemented:
- Add a page-type attribute to the in theme.liquid (set to the current template) to enable page-specific styling.
- In base.css, target the home page via [page-type=“index”] and decrease horizontal padding for .page-width and .page-width-desktop to make content wider.
- Add a media query (max-width: 989px) to remove extra padding for the multicolumn section on mobile, preserving good small-screen layout.
Process notes:
- Helper requested the store preview URL; the requester provided it.
- Visual aids (screenshots) showed where to insert the attribute and the resulting wider layout.
Outcome:
- The requester confirmed the solution worked perfectly.
- Discussion is resolved with clear, actionable changes and no outstanding questions.
Hi @cdgerard
Could you share your store URL so I can provide the solution?
Best Regards,
Dan from Ryviu
Hi, here it is:
@cdgerard Please follow the below steps to widen the home page. Let me know whether it is helpful for you.
- Go to “Online stores” → “Themes”.
- Click action button from the current theme and select “Edit code”.
- Search “theme.liquid” file and paste the below code to the tag like in the below mentioned screenshot.
page-type={{ template }}
- Search “base.css” file and paste below code at the bottom of the file.
[page-type="index"] .page-width , [page-type="index"] .page-width-desktop {
padding-left: 2.5rem !important;
padding-right: 2.5rem !important;
}
@media screen and (max-width: 989px) {
[page-type="index"] .multicolumn .page-width {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
Result will be like,
Please provide your support by click “Like” and “Accepted” if our solution works for you. Thanks for your support.
1 Like
Works perfect. Thank you!