Password Page Font Color is Different on Mobile

Shopify Discussion
,

Topic summary

A user encountered a font color inconsistency on their Dawn theme password page: text displayed correctly on desktop but appeared white on mobile devices, making it difficult to read.

Root Cause:
The issue stemmed from CSS code in the assets/section-email-signup-banner.css file. A media query for screens under 749px was forcing white text colors (--color-foreground: 255, 255, 255) on mobile views.

Solution Provided:
Comment out the color-forcing CSS variables within the mobile media query to allow the desktop colors to apply across all devices. Alternatively, explicitly set the desired RGB values (e.g., --color-foreground: 199, 97, 28 for the brand’s orange color).

Outcome:
The user successfully implemented the fix. A minor typo in the code snippet (dot instead of comma in the RGB value) was corrected in a follow-up post.

Status: Resolved. The mobile password page now displays the correct font color matching the desktop version.

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

I’m using the Dawn theme. The Password page of my website changes font color depending on whether it’s viewed on mobile or desktop. While the desktop font color is in the correct color, it changes to white when viewed on mobile.

Any idea on what I’m doing wrong?

Screenshot 2025-10-09 at 2.54.12 PM
Screenshot 2025-10-09 at 2.54.12 PM736×1010 48.8 KB

Screenshot 2025-10-09 at 2.54.35 PM
Screenshot 2025-10-09 at 2.54.35 PM1126×770 35.1 KB

[REDACTED per request]

2

Hi @cck110925

You need to check assets/section-email-signup-banner.css file and this is code that makes it all white

@media screen and (max-width: 749px) {
    .email-signup-banner:not(.banner--mobile-bottom) .banner__box:not(.email-signup-banner__box--no-image) {
        background-color:transparent;
        --color-foreground: 255, 255, 255;
        --color-button: 255, 255, 255;
        --color-button-text: 0, 0, 0
    }
}

So you can just comment out colors part with

@media screen and (max-width: 749px) {
    .email-signup-banner:not(.banner--mobile-bottom) .banner__box:not(.email-signup-banner__box--no-image) {
        background-color:transparent;
       /* --color-foreground: 255, 255, 255;
        --color-button: 255, 255, 255;
        --color-button-text: 0, 0, 0*/
    }
}

that way you should get

Screenshot 2025-10-09 090437
Screenshot 2025-10-09 090437431×506 25.1 KB

1 Like
4

I do not think you need to put that color anywhere, because it picks up the color that is already on the desktop. Code I said you should comment out overwritten those to white.

But this would be your colors then, in variables

@media screen and (max-width: 749px) {
    .email-signup-banner:not(.banner--mobile-bottom) .banner__box:not(.email-signup-banner__box--no-image) {
        background-color:transparent;
        --color-foreground: 199, 97, 28;
        --color-button: 199, 97, 28;
        --color-button-text: 255,255.255
    }
}
5

That worked so well, thanks!

1 Like
6

Small typo in last code have dot instead of comma at last line so it should be

@media screen and (max-width: 749px) {
    .email-signup-banner:not(.banner--mobile-bottom) .banner__box:not(.email-signup-banner__box--no-image) {
        background-color:transparent;
        --color-foreground: 199, 97, 28;
        --color-button: 199, 97, 28;
        --color-button-text: 255,255,255
    }
}
1 Like