Hi all,
We are on the Impulse theme and I would like to reduce the spacing between some of the sections on the homepage (aquabound.com). How would I go about doing this? Thanks in advance for your help!
Topic summary
Main issue: Reduce the vertical spacing between homepage sections on a Shopify store using the Impulse theme (aquabound.com).
Latest update: A responder measured the current section gap on large screens at 75px and suggested a CSS adjustment. Add a rule in theme.css targeting only the homepage (selector: body.template-index .index-section) inside a min-width: 769px media query, and set margin to the desired value (example: 60px). This changes spacing on desktop without affecting other templates.
Alternative approach: Implement a theme customization that exposes a spacing control in the theme editor (similar to Dawn), allowing non-technical adjustment of section spacing without editing code.
Notes: Screenshots were shared (one showing spacing, another illustrating a potential editor control). No confirmation from the requester yet.
Action items:
- Add the CSS override and tune the margin value.
- Consider adding a theme setting for editor-based spacing control.
Status: Open; awaiting outcome/confirmation.
Hi,
The margin between sections on large screen of your store is currently 75px. You can add this code to the bottom of the global CSS file (‘theme.css’) You can replace 60px by your desired gap. And this is for homepage only (with CSS class ‘body.template-index’).
@media only screen and (min-width: 769px) {
body.template-index .index-section {
margin: 60px 0;
}
}
However, I think a better way is too add custom code to the theme so you would be able to adjust the spacing between sections using theme editor which is similar to Dawn theme.
