Change header text color on mobile (Dawn Theme)

Store Design

Topic summary

Goal: change banner carousel header and subtext colors on mobile only in the Dawn theme to improve readability.

Proposed fix: add a CSS media query in assets > base.css targeting mobile screens (max-width: 767px). The code sets mobile-only colors for:

  • .banner__heading { color: #006400 !important; }
  • .banner__text span { color: #171353 !important; }
    Explanation: a media query applies styles only on small screens, preventing desktop styles from changing.

Outcome so far:

  • Original poster confirmed the solution helped and expressed thanks.
  • A later participant reported that only the heading color changed; the subtext color did not update and asked for a fix.

Notes:

  • Images were shared to illustrate readability differences between desktop and mobile.

Status: partially resolved. The media-query approach works for the header and reportedly for the OP; subtext styling remains unresolved for another user (potential selector differences). Discussion appears open.

Summarized with AI on January 15. AI used: gpt-5.
1

I’d like to change the color of the header text and subtext on the banner carousel on mobile if possible. I was able to edit it, but the colors apply to both desktop and mobile. On desktop the colors look fine, but it is unfortunately unreadable on mobile.

It looks great on the desktop version, but it is currently rather difficult to read on mobile as you can see in the image below, with a comparison image on desktop.

Is there a way I can just adjust the text for mobile view using the Dawn theme?

Thank you!!

Screen Shot 2022-07-04 at 1.44.53 PM.png
Screen Shot 2022-07-04 at 1.44.53 PM.png2712×1342 486 KB

IMG_1986.jpeg
IMG_1986.jpeg1111×1560 156 KB

2

Hello @theteadrawer

Please use below code on assets → base.css at the bottom to change colors of text on banner only for mobile

@media screen and (max-width: 767px){
.banner__heading {
color: #006400 !important;
}

.banner__text span {
color: #171353 !important;
}
}

1 Like
3

Thank you so much for your help!

4

it only worked for the heading text can you fix pls thanks
it only worked for the heading text can you fix pls thanks2880×1800 357 KB

5

it only worked for the heading text can you fix pls thanks