How to leave some space between these 2

Shopify Discussion

Topic summary

A user seeks help adding vertical spacing between two elements on their Shopify mobile site, sharing a screenshot showing the layout issue.

Solutions Provided:

Three community members offered CSS solutions targeting mobile screens (max-width: 768px):

  • Hasan112: Suggested adding padding-bottom: 24px to the specific slideshow section ID
  • websensepro: Recommended inserting padding-bottom: 12px into theme.css/base.css targeting the general slideshow class
  • Rahul_dhiman: Proposed adding padding-bottom: 20px to component-slideshow.css with the specific section ID, including a result screenshot

All solutions use the !important flag to override existing styles. The approaches differ slightly in:

  • Target file location (theme.css vs. component-slideshow.css)
  • Selector specificity (section ID vs. general class)
  • Spacing amount (12px-24px)

Status: Multiple solutions offered; awaiting original poster’s confirmation of which approach worked.

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

Hello friends, how can I leave some space between these 2 here?

Bildschirmfoto 2025-01-02 um 12.15.59.png
Bildschirmfoto 2025-01-02 um 12.15.59.png622×1136 283 KB

1 Like
2

@NikosBat Hello

@media screen and (max-width: 768px) {
    #shopify-section-template--22328067621196__slideshow_GYi7dc .slideshow__text.banner__box.content-container {
        padding-bottom: 24px !important;
    }
}

Accept as solution and like

Hasan112_0-1735817597010.png
Hasan112_0-1735817597010.png451×534 98 KB

3

Hi @NikosBat

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css file and paste the code in the bottom of the file.
@media screen and (max-width: 768px){
.slideshow__text.banner__box.content-container {
    padding-bottom: 12px !important;
}
}

If my reply is helpful, kindly click like and mark it as an accepted solution.
If you are happy with my help, you can help me buy a COFFEE
Thanks!

4

Hello @NikosBat
Go to online store ----> themes ----> actions ----> edit code ----> assets ----> component-slideshow.css
add this code at the end of the file and save.

@media screen and (max-width: 768px) {
#shopify-section-template--22328067621196__slideshow_GYi7dc .slideshow__text.banner__box.content-container {
padding-bottom: 20px !important;
}
}

result

105.png
105.png429×653 106 KB

If this was helpful, hit the like button and accept the solution.
Thanks