Troubleshooting marquee banner with text resizing bug on mobile

Question

I have implemented the following scrolling marquee banner on my site, and it works perfectly on desktop, however on mobile it will load correctly for a second, and then the text randomly resizes and is cropped off at the top. I'm guessing it must have something to do with a point where it hits something on it's track, but I'm not sure how to fix it.

Banner working correctly

1 second later

Here is the full code:<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 so much in advance for any help!

I took a look at the code, but couldn't figure it out.

Answer 1

Ensure a responsive design by setting the viewport meta tag in your HTML. Implement CSS media queries to adjust styles for smaller screens. Check the marquee container's overflow property and use relative font size units like em for better mobile adaptability. Test across various devices to identify and address any remaining text resizing issues.