How do I reduce the width of the logo bar?

Store Design

Topic summary

A user seeks to reduce the width of their logo bar (marquee/scrolling content section), which appears too thick for their preference.

Multiple Solutions Offered:

Several developers provided CSS code snippets to adjust spacing:

  • Adding margin adjustments to .scrolling-content__item in theme.liquid
  • Modifying gap, margin, and alignment properties in theme.css/base.css
  • Adjusting container bleeding distance for the marquee-text element

Initial Issue:

The first solution didn’t work, and the user clarified the gap was between navigation arrows, not the logos themselves.

Resolution:

Moeed provided a targeted fix by adding padding adjustments to the specific section ID in theme.liquid:

section#shopify-section-template--23903218270546__scrolling_content_n9GMTK .section-spacing {
    padding: 0 !important;
}

This successfully resolved the issue, with the user confirming the solution worked.

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

Screenshot 2024-11-26 at 09.05.50.png
Screenshot 2024-11-26 at 09.05.50.png2668×984 184 KB

How do I reduce the size of the logo bar? Any help is appreciated!

It’s too thick for what I’d like - my website is www.february-bloom.com

1 Like
2

Hello @FebruaryBloom

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

marquee-text .scrolling-content__item>* { margin-inline-start: 8px !important; margin-inline-end: 8px !important; }

Result:

Tech_Coding_0-1732608762044.png
Tech_Coding_0-1732608762044.png1350×149 29.7 KB

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

3

Hey @FebruaryBloom

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1732608980663.png
Moeed_0-1732608980663.png1891×899 166 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

4

Hello, @FebruaryBloom

  1. Go to Online Store
  2. Edit Code
  3. Find theme.css/base.css file
  4. Add the following code in the bottom
.scrolling-content__item {
    display: flex !important;
    justify-content: start !important;
    align-items: center !important;
    gap: 0px !important;
    margin-inline-start: 0px !important;
    margin-inline-end: 0px !important;
}

Thanks!

5

Hello @FebruaryBloom

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > theme.css and paste this at the bottom of the file:
marquee-text.scrolling-content {
--distance-to-bleed: max(var(--container-gutter), 50% - var(--container-max-width) / 2);
margin-inline-start: max(var(--container-gutter), 50% - var(--container-max-width) / 2);
margin-inline-end: max(var(--container-gutter), 50% - var(--container-max-width) / 2);
}

ZestardTech_0-1732612141166.png
ZestardTech_0-1732612141166.png1919×451 188 KB

6

Tried this but it didn’t change :disappointed_face:

7

Screenshot 2024-11-26 at 11.35.15.png
Screenshot 2024-11-26 at 11.35.15.png2664×458 54.2 KB

So I added this and that’s good but it’s actually the gap between the arrows, not between the logos :slightly_smiling_face:

1 Like
8

Hey @FebruaryBloom

Keep the previous code and add this new code above in the end of theme.liquid file

section#shopify-section-template--23903218270546__scrolling_content_n9GMTK .section-spacing {
    padding: 0 !important;
}

RESULT:

Moeed_0-1732617806216.png
Moeed_0-1732617806216.png1894×911 198 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

9

Brilliant - thank you!

1 Like
10

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.