how to remove space between the rich text and the image banner in Sense theme

Topic summary

Main issue: remove the gap between a Rich text and an Image banner in the Sense theme. Solution provided and confirmed: add a CSS rule targeting the specific banner section ID to set margin-top: 0.

  • CSS used: section#shopify-section-template–23486520394049__image_banner_… { margin-top: 0; }
  • Clarification: the numeric string is part of the unique section ID; this rule only affects that banner.

Second request (another store): remove spacing between five banners so they touch. Solution provided and confirmed: set .section+.section { margin-top: 0 !important; } with an additional mobile (max-width: 749px) variant.

Further layout request: make “Text columns with images” show five images in one row on desktop and a one-at-a-time slideshow on mobile. Desktop solved by setting .grid–flush-bottom > .grid__item { width: 20%; } for min-width: 749px. Mobile slideshow (with arrows/auto) still pending.

Additional header changes requested (desktop: centered logo, left menu, right cart, no search, larger bold Lora; mobile: menu left, logo center, cart right). No solution posted yet.

Images/screenshots were provided to illustrate spacing and results. Status: several issues resolved via CSS; thread remains open for mobile slideshow and header layout.

Summarized with AI on December 14. AI used: gpt-5.

That is the I.D of the banner your using. This code dont apply on the other banner section that you will used.