Get rid of this odd space in announcement bar

Store Design

Topic summary

A user is experiencing an unwanted extra space appearing in their announcement bar with marquee scrolling text.

The Issue:

  • Visual inconsistency showing extra spacing on one side of the announcement bar
  • The problem occurs with custom marquee text scroll implementation
  • A screenshot demonstrates the spacing difference

Technical Details:

  • Custom CSS code provided for the marquee animation effect
  • Code includes animation controls, gap settings, and hover-pause functionality
  • Liquid template code (appears reversed/encoded) is also included in the implementation

Status:
One respondent indicated the issue appears to be resolved, though no specific solution details were shared in the conversation.

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

Get rid of this odd extra space in announcement bar. You can see the difference on the left.

I have marquee text scroll below for the code.

My store is https://zephyrshop.org

Screenshot 2024-04-06 104127.png

Code is:

.marquee { --gap: 5rem; position: relative; display: flex; overflow: hidden; user-select: none; gap: var(--gap); } .marquee__content { flex-shrink: 0; display: flex; justify-content: space-around; gap: var(--gap); min-width: 100%; } @keyframes scroll { from { transform: translateX(0); } to { transform: translateX(calc(-100% - var(--gap))); } } @media (prefers-reduced-motion: reduce) { .marquee__content { animation-play-state: paused !important; } } /* Enable animation and speed*/ .enable-animation .marquee__content { animation: scroll 30s linear infinite; } /* Pause on hover */ .marquee--hover-pause:hover .marquee__content { animation-play-state: paused; } .marquee--fit-content { max-width: fit-content; } .marquee--pos-absolute .marquee__content:last-child { position: absolute; top: 0; left: 0; } .enable-animation .marquee--pos-absolute .marquee__content:last-child { animation-name: scroll-abs; } @keyframes scroll-abs { from { transform: translateX(calc(100% + var(--gap))); } to { transform: translateX(0); } } ul.marquee__content { margin: 0; }

{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when ‘announcement’ -%}

{%- if block.settings.message_one != blank -%} {%- if block.settings.link != blank -%} {%- endif -%}
  • {{ block.settings.message_one | escape }} {%- if block.settings.link != blank -%} {% render 'icon-arrow' %} {%- endif -%}
  • {{ block.settings.message_two | escape }} {%- if block.settings.link != blank -%} {% render 'icon-arrow' %} {%- endif -%}
  • {{ block.settings.message_three | escape }} {%- if block.settings.link != blank -%} {% render 'icon-arrow' %} {%- endif -%}
  • {{ block.settings.message_four | escape }} {%- if block.settings.link != blank -%} {% render 'icon-arrow' %} {%- endif -%}
  • {{ block.settings.message_five | escape }} {%- if block.settings.link != blank -%} {% render 'icon-arrow' %} {%- endif -%}
  • {{ block.settings.message_one | escape }} {%- if block.settings.link != blank -%} {% render 'icon-arrow' %} {%- endif -%}
  • {{ block.settings.message_two | escape }} {%- if block.settings.link != blank -%} {% render 'icon-arrow' %} {%- endif -%}
  • {{ block.settings.message_three | escape }} {%- if block.settings.link != blank -%} {% render 'icon-arrow' %} {%- endif -%}
  • {{ block.settings.message_four | escape }} {%- if block.settings.link != blank -%} {% render 'icon-arrow' %} {%- endif -%}
  • {{ block.settings.message_five | escape }} {%- if block.settings.link != blank -%} {% render 'icon-arrow' %} {%- endif -%}
{%- if block.settings.link != blank -%} {%- endif -%} {%- endif -%}
{%- endcase -%} {%- endfor -%}

{% 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”: “message_one”,
“default”: “Message one”,
“label”: “Announcement one”
},
{
“type”: “text”,
“id”: “message_two”,
“default”: “Message two”,
“label”: “Announcement two”
},
{
“type”: “text”,
“id”: “message_three”,
“default”: “Message three”,
“label”: “Announcement three”
},
{
“type”: “text”,
“id”: “message_four”,
“default”: “Message four”,
“label”: “Announcement four”
},
{
“type”: “text”,
“id”: “message_five”,
“default”: “Message five”,
“label”: “Announcement five”
},
{
“type”: “select”,
“id”: “text_alignment”,
“options”: [
{
“value”: “left”,
“label”: “t:sections.announcement-bar.blocks.announcement.settings.text_alignment.options__1.label”
},
{
“value”: “center”,
“label”: “t:sections.announcement-bar.blocks.announcement.settings.text_alignment.options__2.label”
},
{
“value”: “right”,
“label”: “t:sections.announcement-bar.blocks.announcement.settings.text_alignment.options__3.label”
}
],
“default”: “center”,
“label”: “t:sections.announcement-bar.blocks.announcement.settings.text_alignment.label”
},
{
“type”: “color_scheme”,
“id”: “color_scheme”,
“label”: “t:sections.all.colors.label”,
“default”: “accent-1”
},
{
“type”: “url”,
“id”: “link”,
“label”: “t:sections.announcement-bar.blocks.announcement.settings.link.label”
}
]
}
],
“default”: {
“blocks”: [
{
“type”: “announcement”
}
]
}
}
{% endschema %}

2

It seems resolved now.