Bug? Button block when using highlight for colour loses text space

  • websquared
    July 10, 2026 at 12:52 am

    Morning

    I need a button that says “Learn More…” that has the 2 words in different colours – I used highlight to change the colour of the text. But when I did that the space between the two words disappeared.

    Code showing the difference 

    <div class="gb-element-65427ecc">
<a class="gb-text gb-text-b31c6cc3">Learn More...</a>
</div>

    after

    <div class="gb-element-65427ecc">
<a class="gb-text gb-text-b31c6cc3"><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-base-3-color">Learn</mark> More...</a>
</div>

    So the space between learn and more doesn’t display

    I am also using letter spacing = 2 – but even when I remove that we still have the same issue, and when I Highlight the 2nd word it still happens

    Site currently in progress and behind a wall – but just thought that I would mention it. and I will come up with a new way to change that colour using CSS only

    Thank you
    Sarah

  • Alvind
    July 10, 2026 at 3:51 am

    Hi Sarah,

    That isn’t a bug – it appears to be the expected behavior when the Button block is set to Display: Flex or Inline Flex.

    Try changing the button’s Display setting to Inline instead.

  • websquared
    July 10, 2026 at 4:07 am

    Yes you are correct Display inline fixes that – but as the display: Inline Flex is the default … anyway thanks for the solution – still random but hopefully this ticket will help if others come across this quirk

  • Alvind
    July 10, 2026 at 4:15 am

    Sure, no problem 🙂

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.