check marks on desktop white, mobile black

Store Design
, , , , , ,

Topic summary

A Shopify store owner using the Craft theme encountered an issue where checkmarks in the announcement bar appeared white on desktop but black on mobile devices.

Root Cause:
The selected font lacks a definition for the checkmark symbol, forcing browsers to use fallback fonts. Desktop and mobile browsers chose different fallbacks, resulting in inconsistent colors.

Solution Provided:
Add custom CSS to the announcement bar section to specify a fallback font (monospace) that includes the checkmark symbol:

.announcement-bar__message {
  font-family: var(--font-heading-family), monospace;
}

Implementation Issue:
Initially, the code didn’t work because the user omitted the dot (.) before the class name. After correction, the checkmarks displayed consistently in white.

Ongoing Concern:
While the color issue is resolved, the checkmark appearance with the monospace font isn’t ideal on mobile. Alternative checkmark symbols (✓ or :check_mark:) were suggested as potential improvements for better font representation.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

Hi,

As you can see the check marks are white on desktop, but black on mobile. How do i change this to white for mobile also?

Desktop:

Thetraveladdict_0-1748292695394.png
Thetraveladdict_0-1748292695394.png1278×150 12.3 KB

Mobile:

Thetraveladdict_1-1748292822272.png
Thetraveladdict_1-1748292822272.png1104×465 96.1 KB

Store:

Theme: Craft

Thanks!

2

Hi @Thetraveladdict ,

I checked and it shows fine, did you solve it?

3

Not all fonts contain all symbols. The font you’re using does not have definition for this checkmark symbol, so the browser has to fall back to a font of its own choosing. Browser on desktop chooses one font, browser on mobile chooses another.

You can try to suggest a better fall-back font – monospace usually has most of the symbols.

Paste this into “Announcement bar” section setting “Custom CSS”

.announcement-bar__message {
  font-family: var(--font-heading-family), monospace;
}
4

hello @Thetraveladdict

It is showing fine in mobile view also

Discover-Portugal-City-tips-for-every-traveler-–-The-travel-addict-05-27-2025_10_32_AM.png
Discover-Portugal-City-tips-for-every-traveler-–-The-travel-addict-05-27-2025_10_32_AM.png348×312 13.4 KB

Thanks

5

Hi @tim_1 I tried this one, but on my iphone browser it’s still black

6

I do not see the code applied at your site.

When I add it in the browser on my iPhone, it works.

7

Hi @tim_1

I added it over here, but let me know if you want me to add it somewhere else

Thetraveladdict_0-1748423378307.png
Thetraveladdict_0-1748423378307.png271×295 12.7 KB

Thanks!

8

You’re missing the dot in front of the announcement-bar__message – rule does not apply.

9

Hi @tim_1 it worked. However with this font the checkmark doesn’t really look well on mobile…

10

Well, you can try different checkmarks – they may better representation in fonts than the one you have:

https://www.toptal.com/designers/htmlarrows/symbols/check-mark/ or

https://www.toptal.com/designers/htmlarrows/symbols/heavy-check-mark/