How to fix marquee banner code glitch on mobile?

How to fix marquee banner code glitch on mobile?

Project_ATLAS
Tourist
30 0 2

I currently have this cool marquee banner as the announcement bar for my store. However it has a couple of issues.

The first one is that on mobile it has a weird glitch where it will display properly on the initial load, but then after a couple of seconds or so it randomly increases the size of the text and renders incorrectly as you can see in the example below.

(Displaying correctly) 👇

WhatsApp Image 2023-11-06 at 20.36.44_a4d26786.jpg



1 second later (displaying incorrectly)

WhatsApp Image 2023-11-06 at 20.36.52_82f47145.jpg



I've tried looking at the code, but I don't really know what I'm looking at here.

 

<style>
  .custom-marquee {
    position: relative;
    width: 100vw;
    max-width: 100%;
    height: 35px;
    overflow-x: hidden;
    z-index: 100;
    background:{{section.settings.colorBackground}}; 
    color:{{section.settings.colorText}}; 
  }
  .custom-marquee a {
    color:{{section.settings.colorText}}; 
  }
  .custom-marquee .track {
      position: absolute;
      bottom: 5px;
      white-space: nowrap;
      will-change: transform;
      animation: marquee 11s linear infinite;
      font-size: 1.3rem;
  }
  .custom-marquee .content {
    margin-left: 40px;
  }
  @keyframes marquee {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-20%);
    }
  }
</style>
  <div class="custom-marquee " role="region" {{ block.shopify_attributes }}>
    {%- if section.settings.text != blank -%}
      {%- if section.settings.link != blank -%}
        <a href="{{ section.settings.link }}" class="">
      {%- endif -%}
          <div class="track ">
            <span class="content marquee-text">{{ section.settings.text | escape }}</span>
            <span class="content marquee-text">{{ section.settings.text | escape }}</span>
            <span class="content marquee-text">{{ section.settings.text | escape }}</span>
            <span class="content marquee-text">{{ section.settings.text | escape }}</span>
            <span class="content marquee-text">{{ section.settings.text | escape }}</span>
            <span class="content marquee-text">{{ section.settings.text | escape }}</span>
            <span class="content marquee-text">{{ section.settings.text | escape }}</span>
            <span class="content marquee-text">{{ section.settings.text | escape }}</span>
            <span class="content marquee-text">{{ section.settings.text | escape }}</span>
            <span class="content marquee-text">{{ section.settings.text | escape }}</span>
            {%- if section.settings.link != blank -%}
              {% render 'icon-arrow' %}
            {%- endif -%}
          </div>
          {%- if section.settings.link != blank -%}
        </a>
      {%- endif -%}
    {%- endif -%}
  </div>
<script>
var marquees = document.getElementsByClassName("marquee-text");
for (let i = 0; i < marquees.length; i++) {
   // console.log(marquees.item(i));
  let str = marquees.item(i).innerHTML;
  let improvedText = str.replaceAll("|", "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;")
  console.log(improvedText)
  marquees.item(i).innerHTML = improvedText
}
</script>
{% schema %}
{
  "name": "Marquee Announcement",
  "settings": [
    {
      "type": "text",
      "id": "text",
      "default": "Black Friday Sale | Save up to 75% off storewide",
      "label": "Add text to display"
    },
    {
      "type": "color",
      "id": "colorBackground",
      "label": "Background color",
      "default": "#B2FCE4"
    },
    {
      "type": "color",
      "id": "colorText",
      "label": "Text color",
      "default": "#000"
    },
    {
      "type": "url",
      "id": "link",
      "label": "Link"
    }
  ]
}
{% endschema %}

 

 


Thank you in advance for any help.

Replies 14 (14)

Abdosamer
Shopify Partner
836 149 169

Hi Project_ATLAS, Can you provide your shop url? so I can inspect the elements and see the code that is responsible for the issue.

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
My work
Project_ATLAS
Tourist
30 0 2

magicbrushco.com

Thank you.

Abdosamer
Shopify Partner
836 149 169

I tried the website on different mobile screens, and the text is consistent, doesn't seem to have any issue.

Abdosamer_0-1699405337347.png

 

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
My work
Project_ATLAS
Tourist
30 0 2

Sorry, that was not the marquee banner, I have had to replace it with the standard one. But I have reactivated it now, please recheck it for me now.

(Also, if it doesn't happen right away, it can be intermittent, you might need to refresh sort of thing).

The text for it actually reads 'Black Friday Sale | Save up to 75% off' (as one line) but it is being broken up with the line removed as well.

Abdosamer
Shopify Partner
836 149 169

I looked into it, it seems the reason why the text is broken is because this part of code

 

let improvedText = str.replaceAll("|", "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;")

 

the code replaces (|) character with white space, that is why you don't see the character instead there are white space. 
So there are alot of solutions here depending on what you need, do you need to display (|) character? 

 

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
My work
Project_ATLAS
Tourist
30 0 2

Yes I do. I think this is a line of code added by someone I hired to fix the other issue I mentioned, which worked for a while, but has since started breaking again.

Abdosamer
Shopify Partner
836 149 169

I don't have the context of the whole code, but If the "|" characters are not causing any problems you can remove this line of code, and send me the result.

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
My work
Project_ATLAS
Tourist
30 0 2

Okay thank you. I'm not sure what you mean by you don't have the context for the whole code though. I described the main issue above with images, and provided the entire code.

Abdosamer
Shopify Partner
836 149 169

I mean there are many moving part of the whole website, you provided a snippet of code, there is maybe another snippet of code affect this one, or javascript function somewhere in a file affecting other files, that what I mean by context.

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
My work
Project_ATLAS
Tourist
30 0 2

No, that's literally everything. That code is sitting in a .liquid file inside of the sections folder. There is no other code.

Project_ATLAS
Tourist
30 0 2

Also I remove the code you mentioned and that did fix that issue thank you.

There's just this problem with the banner randomly changing size for some reason, maybe it's the font size changing or? As you can see in the photos, it loads normally for a moment, and then breaks for some reason. I'm guessing it has something to do with the track and some kind of sizing issue, or, I don't really know.

Abdosamer
Shopify Partner
836 149 169

Hi Project_ATLAS, are you still facing the text size problem, I looked into the website and it seems to work normally.

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
My work
Project_ATLAS
Tourist
30 0 2

Hi Abdosamer, yes, it is still broken. Are you viewing the site on mobile? (The problem only occurs here)

MRamzan
Shopify Partner
183 3 26

Follow this latest code:

Create a new section marquee and paste below code.

You can add marquee section to any page.

 

 

<style>
  .section-{{ section.id }}.custom-marquee {
    display: flex;
    align-items: center;
    height: {{section.settings.marquee_height}}px;
    width: 100vw;
    max-width: 100%;
    overflow-x: hidden;
    background:{{section.settings.colorBackground}}; 
    color:{{section.settings.colorText}}; 
  }
  .section-{{ section.id }}.custom-marquee a {
    color:{{section.settings.colorText}}; 
    text-decoration: none;
  }
  .section-{{ section.id }}.custom-marquee .track {
    display: flex;
    align-items: center;
    white-space: nowrap;
    will-change: transform;
    animation: marquee 12s linear infinite;
  }
  .section-{{ section.id }}.custom-marquee .content {
    margin-left: 40px;
    font-size: {{section.settings.font_size}}px;
  }
  @keyframes marquee {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-20%);
    }
  }
</style>
  <div class="section-{{ section.id }} custom-marquee " role="region" {{ block.shopify_attributes }}>
      {%- if section.settings.link != blank -%}
        <a href="{{ section.settings.link }}" class="">
      {%- endif -%}
          <div class="track ">
            {%- for block in section.blocks -%}
            <span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
            {%- endfor -%}
            {%- for block in section.blocks -%}
              <span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
            {%- endfor -%}
            {%- for block in section.blocks -%}
              <span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
            {%- endfor -%}
            {%- for block in section.blocks -%}
              <span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
            {%- endfor -%}
            {%- for block in section.blocks -%}
              <span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
            {%- endfor -%}
            {%- for block in section.blocks -%}
              <span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
            {%- endfor -%}
            {%- for block in section.blocks -%}
              <span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
            {%- endfor -%}
            {%- for block in section.blocks -%}
              <span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
            {%- endfor -%}
            {%- for block in section.blocks -%}
              <span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
            {%- endfor -%}
            {%- for block in section.blocks -%}
              <span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
            {%- endfor -%}
            {%- if section.settings.link != blank -%}
              {% render 'icon-arrow' %}
            {%- endif -%}
          </div>
          {%- if section.settings.link != blank -%}
        </a>
    {%- endif -%}
  </div>
{% schema %}
{
  "name": "Marquee Text",
  "settings": [
    {
      "type": "color",
      "id": "colorBackground",
      "label": "Background color",
      "default": "#000"
    },
    {
      "type": "color",
      "id": "colorText",
      "label": "Text color",
      "default": "#fff"
    },
    {
      "type": "url",
      "id": "link",
      "label": "Link"
    },
    {
      "type": "range",
      "id": "marquee_height",
      "min": 24,
      "max": 200,
      "step": 2,
      "default": 46,
      "label": "Marquee height"
    },
    {
      "type": "range",
      "id": "font_size",
      "min": 8,
      "max": 100,
      "step": 2,
      "default": 24,
      "label": "Font size"
    }
  ],
    "blocks": [
    {
      "type": "text",
      "name": "Text",
      "limit": 20,
      "settings": [
         {
          "type": "text",
          "id": "new_text",
          "default": "Welcome to store",
          "label": "Text"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Marquee",
      "blocks": [
        {
          "type": "text"
        },
        {
          "type": "text"
        },
        {
          "type": "text"
        }
      ]
    }
  ]
}
{% endschema %}

 

Hire Me:

WhatsApp: +91-9145985880
Email: mohdramzaan112@gmail.com
Skype: mohdramzaan112