How can I reduce the space between my slide and featured collection title?

Store Design
,

Topic summary

A user seeks to reduce or eliminate the vertical spacing between a slideshow element at the top of their page and the featured collection title positioned below it.

Proposed Solutions:
Multiple respondents provided CSS-based fixes, all involving editing the theme.scss or theme.scss.css file in the theme’s Assets folder:

  • Target specific section: Add CSS targeting .index-section.index-section--overflow-scroller with margin: 0; to remove spacing for that particular section
  • Adjust all section margins: Use a media query @media only screen and (min-width: 769px) to modify .index-section margin from 120px 0 to 40px 0 !important (or 0 for complete removal)
  • Collection-specific adjustments: One response included additional CSS for collection section width and grid item margins

Implementation Path:
All solutions follow the same workflow: Online Store → Edit code → Assets → theme.scss/theme.scss.css → paste CSS at bottom of file.

The discussion remains open with no confirmation from the original poster on which solution worked.

Summarized with AI on November 24. AI used: claude-sonnet-4-5-20250929.
1

How do I eliminate the space been the slide at the top and my featured collection title underneath it?

Picture attached for reference.

URL: https://activusperformance.com

Screenshot (114).png
Screenshot (114).png1673×1055 200 KB

2

@ryanmacventures ,

.index-section.index-section--overflow-scroller {
    margin: 37px 0;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->theme.scss.liquid

3

Hello @ryanmacventures ,
Go to Online store >> Edit code >> Assets >> theme.scss
Add this code below of theme.scss file


@media only screen and (min-width: 769px){
.overflow-scroller .grid__item:first-child {
margin-left: 22px !Important;
}
#CollectionSection-165886361792fb075f .page-width {
width: 100%;
max-width: 100% !Important;
}

}
4

Hi,

To remove (or change) the margin between slideshow & featured collection, please follow the steps below.

  1. Go to Online Store (Under Sales channels)

  2. Click … (3 dots next to the Customize)

  3. Click Edit code

  4. Click theme.scss.css (Under Assets)

  5. If you only want the first section margin (between slideshow & featured collection), please add the code below.

.index-section.index-section--overflow-scroller {
    margin: 40px 0 !important;
}

Please note: If you want to change all section’s margin, please find .index-section (Ctl+F) and replace the code as below.

From 

@media only screen and (min-width: 769px) {
  .index-section {
    margin: 120px 0;
  }
}

To

@media only screen and (min-width: 769px) {
  .index-section {
    margin: 40px 0 !important;
  }
}

Hope it helps.

Thanks.