Making "scrolling text" background space smaller

Store Design

Topic summary

Goal: reduce the vertical space above a scrolling text banner in the Impact theme.

Context: An image was shared illustrating excessive top spacing. Store URL and password were provided for review.

Attempts:

  • Custom CSS suggestion to set “.section { padding-top: 0 !important }” did not change the spacing.
  • Theme.css edit to target the scrolling text section with a negative top margin was proposed but did not work; the provided rule used “margin-to,” likely a typo for “margin-top.”

Further steps:

  • Collaborator access was offered to implement changes directly.
  • A new CSS approach was suggested: adjust padding on “.scrolling-text__text…” (set to 0 20px) and on the relevant “.section…” (set to 20px) to tighten spacing.

Notes: CSS (stylesheet) spacing is controlled by padding (inside element space) and margin (outside element space). No confirmed fix yet; the thread remains open pending user feedback on the latest CSS changes.

Summarized with AI on January 17. AI used: gpt-5.
1

issue.PNG
issue.PNG1911×265 100 KB

So what you guys can see her is a scrolling bar. I just wanted to ask what I have to change in the theme.css to make the distance between the text and the banner smaller (just the upper part)
Btw the Theme is Impact!
Thanks!

2

Hi,

I need your store URL to be able to give you the solution for this

3

PW: OnTheWay23

4

If you are using Impact theme. You don’t need to modify the theme css. For that section in the custom css add the following code:
.section {padding-top: 0px !important}.

Let me know if it work by marking it as a solution.

If not will give you the code for theme.css

5

Still didnt work :confused:

6
  1. Go to online store
  2. Edit Code
  3. Open your theme.css file
  4. Paste the following code

#shopify-section-template–19672715592008__scrolling-text {margin-to: -25px !important;}

You can adjust the top level by adjusting the -25px the more it approach to 0 the more space you have.

  1. Save.

Let me know if it work by marking it as a solution.

7

Nope it wasnt it

8

Hi I can get collaborator access to do it for you if you like. Please let me know to send you a request.

have a nice day.

9

Hi @ZenicG

This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:
Online Store ->Theme ->Edit code
Assets ->Theme.css

.scrolling-text__text.heading.motion-reduce\:hidden {
    padding: 0 20px !important;
}
.section.section--tight.section-blends.section-full.text-custom {
    padding: 20px !important;
}

Hope you find my answer helpful!
Best regards,
Richard | PageFly