Marquee spacing

[stitchesdxb]

Hi. I want to have lots of space between each word in my top marquee. how can i do that?

https://dc363b-38.myshopify.com/

Pass: Sarah

[niraj_patel]

Hello @stitchesdxb

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

.custom-marquee .content { margin-left: 15rem !important; }

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

[Moeed]

Hey @stitchesdxb

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:

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

Best Regards,
Moeed

[stitchesdxb]

This is how i want it to look, I did this with photoshop just to show you guys

[stitchesdxb]

check my reply on my main post please.

[stitchesdxb]

no, im using a custom code i got from a youtube video not the shopify built in one

[stitchesdxb]

https://www.youtube.com/watch?v=0ygeQz7OLCc

[stitchesdxb]

    {%- if section.settings.text != blank -%}
      {%- if section.settings.link != blank -%}
        
      {%- endif -%}
          

            {{ section.settings.text | escape }}
            {{ section.settings.text | escape }}
            {{ section.settings.text | escape }}
            {{ section.settings.text | escape }}
            {{ section.settings.text | escape }}
            {{ section.settings.text | escape }}
            {{ section.settings.text | escape }}
            {{ section.settings.text | escape }}
            {{ section.settings.text | escape }}
            {{ section.settings.text | escape }}
            {%- if section.settings.link != blank -%}
              {% render 'icon-arrow' %}
            {%- endif -%}
          

          {%- if section.settings.link != blank -%}
        
      {%- endif -%}
    {%- endif -%}
  

[stitchesdxb]

Yes that looks great!

[stitchesdxb]

Thank u soooo much for your help. It worked. Needs a bit of tweaking (the words are not centered in height in the box)

[stitchesdxb]

I bought u a coffee thanks for your help!

Do u think u can see how to have the text centered in “height” in the marquee box

[stitchesdxb]

see how there is empty space then the marquee box ends, see the text is at the top not middle

[stitchesdxb]

Do i change the whole code to this code?

[stitchesdxb]

its ok on desktop. but on mobile still the same.

i have changed the size of font and box

{{id}} .marquee {
    position: relative;
    width: 100vw;
    max-width: 100%;
    height: 40px;
   background-color: #5d9090;
    overflow-x: hidden;
  }
 {{id}} .marquee-content {
      display: flex;
      gap: 25rem;
   font-size: 18px;
    background-color: #5d9090;
align-items: center;
    line-height: 2;
  }

[stitchesdxb]

See still on mobile its at the top not center