How to edit the announcement bar marquee to be long, continuous, and run the full length of the bar.

[JewelsLab]

Hello,

How to edit the announcement bar marquee to be long, continuous, and run the full length of the bar? I made the announcement bar on the refresh theme a marquee with a custom image background however the characters seem limited and it doesn't run the full length of the bar with no gaps as I would like.  

My store so far: https://jewelslaboratory.myshopify.com/?_ab=0&_fd=0&_sc=1&preview_theme_id=123976941631

The code: 

{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when 'announcement' -%}
<div class="announcement-bar scroll-box color-{{ block.settings.color_scheme }} gradient" role="region" aria-label="{{ 'sections.header.announcement' | t }}" {{ block.shopify_attributes }}>
{%- if block.settings.text != blank -%}
<div class="scroll-container">
{%- if block.settings.link != blank -%}
<a href="{{ block.settings.link }}" class="announcement-bar__link link link--text focus-inset animate-arrow">
{%- endif -%}
<p class="announcement-bar__message h5" id="scroll-element">
{{ block.settings.text | escape }}
{%- if block.settings.link != blank -%}
{% render 'icon-arrow' %}
{%- endif -%}
</p>
{%- if block.settings.link != blank -%}
</a>
{%- endif -%}
</div>
{%- endif -%}
</div>
{%- endcase -%}
{%- endfor -%}

{% style %}
.announcement-bar__message {
text-align: right !important;
}
@-webkit-keyframes scroll{
0% {
margin-right: 0%;
}
100% {
margin-right: 100%;
}
}
.scroll-box {
display: inline-flex;
justify-content: center;
white-space: nowrap;
font-size: 1.1em;
overflow: hidden;
width: 100%;
background: var(--gradient-background);
background-attachment: fixed;
background-image: url(https://cdn.shopify.com/s/files/1/0160/5333/8176/files/Untitled_design-21.png?v=1705741995) !important;
background-position: fit !important;
background-size: auto !important;
}
@media screen and (min-width: 768px) {
.scroll-container {
width: 100%;
direction: rtl;
margin-left: 120px;
overflow: hidden;
}
}
@media screen and (max-width: 767px) {
.scroll-container {
width: 100%;
direction: rtl;
margin-left: 24px;
overflow: hidden;
}
}
#scroll-element {
padding: 10px;
}
{% endstyle %}
<script>

var elemWidth = document.getElementById('scroll-element').offsetWidth;
var time = elemWidth/120; /* lower number for slow & higher number for fast scroll */
document.getElementById('scroll-element').style.cssText = "animation: scroll "+time+"s linear infinite;"

</script>
{% schema %}
{
"name": "t:sections.announcement-bar.name",
"max_blocks": 12,
"blocks": [
{
"type": "announcement",
"name": "t:sections.announcement-bar.blocks.announcement.name",
"settings": [
{
"type": "text",
"id": "text",
"default": "Welcome to our store",
"label": "t:sections.announcement-bar.blocks.announcement.settings.text.label"
},
{
"type": "select",
"id": "color_scheme",
"options": [
{
"value": "accent-1",
"label": "t:sections.all.colors.accent_1.label"
},
{
"value": "accent-2",
"label": "t:sections.all.colors.accent_2.label"
},
{
"value": "background-1",
"label": "t:sections.all.colors.background_1.label"
},
{
"value": "background-2",
"label": "t:sections.all.colors.background_2.label"
},
{
"value": "inverse",
"label": "t:sections.all.colors.inverse.label"
}
],
"default": "accent-1",
"label": "t:sections.all.colors.label"
},
{
"type": "url",
"id": "link",
"label": "t:sections.announcement-bar.blocks.announcement.settings.link.label"
}
]
}
],
"default": {
"blocks": [
{
"type": "announcement"
}
]
}
}
{% endschema %}

[Moeed · Accepted solution]

Hey @JewelsLab 

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 </body> tag

<style>
.scroll-container {
    margin: 0 !important;
}
</style>

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

Best Regards,
Moeed

[JewelsLab]

Thank you