I’m trying to reduce the space between sections on the home page… Do you know how to do it?
There are a lot of space…
Thanks!
Topic summary
Reducing excessive spacing in the Shopify Dawn theme home page. The proposed fix is to add custom CSS at the bottom of assets/base.css to adjust margins for specific sections (rich text, newsletter, featured products). CSS (Cascading Style Sheets) controls visual spacing; selectors targeted section IDs to set margin-top/bottom values.
Outcome: The main section spacing issue was resolved after applying the suggested CSS. The requester confirmed the changes worked.
Additional requests:
- Mobile product grid: Asked to display images in a grid instead of a swipe carousel. A small mobile CSS tweak was provided (adjusting a product popup opener margin), and a link to another post with grid code was shared. Resolution not confirmed here.
- Mobile footer spacing: Suggested CSS within a media query (responsive rule for screens under ~989px) to reduce footer content margins and link padding. Confirmation not shown.
New question: Another participant asked how to remove space between the header and main area (image attached). No response provided yet.
Status: Initial spacing problem resolved; mobile grid, footer spacing, and header gap remain open. Photos were referenced to illustrate spacing issues.
1 Like
can you please share your Dawn theme store preview url
1 Like
1 Like
yes, please try this code
- Go to Online Store->Theme->Edit code
- Asset->/base.css ->paste below code at the bottom of the file.
#shopify-section-template--15623030407390__16429652230ae40f04 .rich-text.rich-text--full-width {
margin-bottom: 0px !important;
}
#shopify-section-template--15623030407390__1642965279abf6e50c .newsletter__wrapper {
margin: 20px 0px 40px !important;
}
1 Like
And how can I reduce this spaces? (photo attached)
Thank you very much! 
1 Like
Please add below code in bottom of assets/base.css file
section#shopify-section-template–15623030407390__featured_products {
margin-top: 0px ;
}
.rich-text–full-width.color-background-1 {
margin-top: 30px ;
margin-bottom: 0;
}
Thank you.
yes, please try this code
#shopify-section-template--15623030407390__rich_text .rich-text.rich-text--full-width {
margin: 40px 0px -10px !important;
}
1 Like
it works my friend, thank you very much!
And the last thing.. on mobile phone, how can I see the images on a grid? I dont want to swipe in order to see them, I want to all of them appears on a grid (see photo attached).
And how can I reduce the space between the description and the other parts? like you can see in the photo attached on the circles…
Thanks!
1 Like
yes, please try this code
@media screen and (max-width: 749px) {
.product-popup-modal__opener {margin: 0 !important;}
}
Product Grid Code your anther post
1 Like
And the space in the mobile footer? (photo attached)
Thanks!
1 Like
can you try this code
media screen and (max-width: 989px) {
.footer-block__details-content {
margin-bottom: 0 !important;
}
.footer-block__details-content .list-menu__item--link {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
}
1 Like
