Spacing between sections on mobile view

Store Design
,
1

Hi, I’ve been trying to reduce the gap between sections on the home page. The gap is fine on desktop but on mobile there’s are large gaps between sections. Could anyone help with this please?

password: chaube

IMG_1183
IMG_11831206×2622 148 KB

IMG_1182
IMG_11821206×2622 472 KB

2

Hi @user4152

Go to Online Store > Themes > Actions > Edit Code > Assets > base.css
Paste your CSS at the bottom of base.css and click Save

@media (max-width: 749px) {
  .banner--mobile-bottom .banner__box {
    padding: 0 !important;
  }
}

image
image308×450 18.1 KB

3

Hey @user4152 , welcome to the Shopify Community!
This usually happens because mobile has extra padding/margins applied by the theme.
Follow these steps:

  1. Go to online Store > Themes
  2. Edit Code > Assets > base.css
  3. Paste your CSS at the bottom of base.css
<style>
@media screen and (max-width: 749px) {
  .section,
  .shopify-section {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  .jdgm-carousel-wrapper {
    width: 100%;
    padding: 0 !important;
  }
}
</style>

This will:
Remove extra spacing between sections on mobile
Keep desktop spacing unchanged

After saving, refresh your site and check on mobile view.

REsult:

image
image393×652 70.1 KB

image
image390×606 32.5 KB

Best Regards,
RAjat

4

Thank you for your help. Just done this but it hasn’t changed unfortunately?