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

Shopify Discussion
, , ,

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.
1

Hi,

Greetings. There is a space between the rich text and the image banner in the Sense theme, I am new to Shopify and need to figure out how to

blank space.JPG
blank space.JPG1907Ă—440 32.9 KB

remove that space.

1 Like
2

Hi @mirza5313

Would you mind to share your Store URL website? with password if its unpublish. Thanks!

3

Hi @Made4uo-Ribe

Thanks for your reply, here is the URL of my store:
https://digitaldaysplanner.myshopify.com/
password: shauff

4

Thanks for the info, do you like to remove the space only on this area right?

Try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
section#shopify-section-template--23486520394049__image_banner_jt3dLq {
    margin-top: 0px;
}

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

5

That worked, thank you so much, and sorry for the late reply I was busy with some stuff, could you please tell me about this 23486520394049, just in case I need to remove the space in future I could do it by myself?

6

Hello i need support too:
https://animalcare.bg/
I have a space between the 5 banners and I don’t want it, can you help me?

7

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

8

mean the distances between the banners, i want them to touch each other

Hristina94_0-1730313533395.png
Hristina94_0-1730313533395.png1920Ă—625 203 KB

9

Hi @Hristina94

Try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media screen and (max-width: 749px) {
    .section+.section {
        margin-top: 0 !important;
    }
}
.section+.section {
        margin-top: 0 !important;
    }

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

1 Like
10

Thank you, work !

11

Welcome, Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

12

Hello,
Can you help me again:
https://mfvxxq-kt.myshopify.com/
0876624960

I would like the Text columns with images section to display the 5 images in a single row side by side for the desktop version.

For the mobile version, I would like them to appear one image at a time in a slideshow, with navigation arrows or automatic transitions if possible.

Could you please help me with this code?

Thank you!

Hristina94_0-1732031459796.png
Hristina94_0-1732031459796.png1463Ă—865 25.6 KB

13

Hi @Hristina94

Try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media only screen and (min-width: 749px){
.grid--flush-bottom>.grid__item {
        width: 20%;
    }
}

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

14

Hello,

The changes work perfectly on the desktop version, but they haven’t been applied to the mobile version. Could you assist me with this as well?
Additionally, I’ll need your help with one more thing-
For the header in the desktop version:

I want the logo to be centered.
The menu should be on the left, and the cart should be on the right, without the search bar.
They should all be aligned with the logo.
The menu font should be Lora, bold, and at least 30% larger.
For the mobile version:

The menu should be on the left, the logo in the center, and the cart on the right.
Thank you in advance for your assistance!

Thank you very much!