How do I decrease the space between two sections even when there's no padding

Store Design
, , , , , , , , , , , , , ,

Topic summary

A user seeks to reduce spacing between sections on their mobile homepage, specifically targeting the gap visible in their screenshot.

Three solutions provided:

  1. CSS modification (BSSCommerce-B2B): Add custom CSS to base.css targeting the slider component with negative margin-bottom (e.g., -30px), adjustable to preference.

  2. Theme.liquid approach (BSS-TekLabs): Insert CSS code in theme.liquid before </head> tag to control section spacing.

  3. Alternative placement (PageFly-Richard): Similar CSS solution but placed before </body> tag in theme.liquid.

All solutions involve adding CSS code snippets to theme files through the Shopify admin panel (Online Store → Themes → Edit code).

Follow-up question: A user asks whether these solutions work universally for all sections or only headers, specifically mentioning spacing between an image and slideshow section. This question remains unanswered, suggesting the original solutions may be component-specific rather than universal.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

I would like to decrease the space here on my home screen, just for mobile view:

Image 22-09-2024 at 00.46.jpeg
Image 22-09-2024 at 00.46.jpeg2880×1800 286 KB

1 Like
2

Hi @lukafernada ,

Step 1: Go to Admin → Online store → Theme > Edit code:

BSSCommerceB2B_0-1726968696250.png
BSSCommerceB2B_0-1726968696250.png400×195 26.3 KB

Step 2: Search for the file base.css. And add this code snippet to the end of the file.

slider-component.slider-mobile-gutter.slider-component-desktop.scroll-trigger.animate--slide-in {
    margin-bottom: -30px !important;
}

IN this step, you can change the value of margin-bottom as you want to decrease the space.

In my example, I choose -30px

Step 3: Save and reload home page.

=>> The result:

BSSCommerceB2B_2-1726968707178.png
BSSCommerceB2B_2-1726968707178.png650×915 188 KB

I hope thse instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir!

3
  • Here is the solution for you @lukafernada
  • Please follow these steps:
  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before and press ‘Save’ to save it
  • Here is the result you will achieve:

BSSTekLabs_0-1726974607448.png
BSSTekLabs_0-1726974607448.png376×816 136 KB

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
1 Like
4

This is Richard from PageFly - Shopify Page Builder App

Hi @lukafernada Please add code here to fix it:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag

Hope my solution will help you resolve the issue.

Best regards,

Richard | PageFly

5

Does this code work for all sections or just header? I’m trying to do the same thing but it’s not my header I added an image on header and added a slideshow under and there’s space between the sections I want to add an image behind my slideshow and reduce sections do you have help for both? Pls! Thank you