Make Text White On Image Banner On Refresh Theme

Store Design

Topic summary

Main issue: Change the subtitle text color on the image banner in the Refresh theme so it’s white on desktop but black on mobile (where the text sits under the image on a white background).

Key steps and outcomes:

  • Initial attempt using a media query (@media screen and (min-width: 750px){ .banner__text .subtitle { color: #fff } }) didn’t work.
  • New CSS added in base.css targeting .banner__text.rte.subtitle strong set the text to white successfully, but on all devices.
  • On mobile, white text becomes invisible against a white background; requested mobile-only black text.
  • Suggested override to black (!important) made all devices black, which isn’t desired.

Current status: Unresolved. The request is to apply different colors by device.

What’s needed: A responsive CSS solution using media queries (CSS rules that apply based on screen width), e.g., desktop (min-width) set to white and mobile (max-width) set to black, scoped to the correct selector (.banner__text.rte.subtitle strong).

Summarized with AI on December 30. AI used: gpt-5.
2

Hi @Justin34

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

.banner__text.rte.subtitle strong {

color: white;

}

Hope that my solution works for you.

Best regards,

Henry | PageFly

1 Like