Get rid of this odd space in announcement bar

Store Design

Topic summary

A user is experiencing an unwanted extra space in their announcement bar, specifically appearing before the “get 70% off discount” text. The spacing issue is visible in a provided screenshot showing inconsistent padding on the left side.

Technical Context:

  • The announcement bar uses custom marquee scrolling text
  • Implementation includes CSS animations with keyframes for horizontal scrolling
  • The code snippet shows styling for .marquee and .marquee__content classes
  • Additional code appears to be reversed/encoded text related to announcement bar messages

Current Status:

  • The issue is isolated to one specific section of the announcement bar
  • Store URL provided: https://zephyrshop.org
  • No solutions or responses have been posted yet

The problem appears to be a CSS spacing or padding issue within the custom marquee implementation that’s affecting text alignment.

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.

This is only before the the get 70% off discount as you can see in the screenshot below.

I have marquee text scroll below for the code.

My store is https://zephyrshop.org

ZephyrShop_0-1712411668822.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 %}

1 Like