How to change text color in mobile view of Refresh Theme?

Store Design

Topic summary

Mobile banner text under the heading appears white on the Refresh theme, making it unreadable; the heading itself is black. The goal is to make that subtitle/body text black on mobile.

  • Suggested fix: add a CSS media query (style rules that apply on smaller screens) targeting mobile widths to force the banner text color to black. Variants shared use max-width around 749–767px and target .banner__text strong, with some recommending !important and/or opacity: 1.

  • Where to place it: add the CSS at the bottom of Assets > base.css via Online Store > Theme > Edit Code.

  • Example patterns provided:
    • @media screen and (max-width: 749px/767px) { .banner__text strong { color: #000; } }
    • Some versions include !important and set opacity: 1.

  • Visual aids: screenshots were included to illustrate where to add the code.

Outcome: The original poster confirmed the CSS solution worked. The issue is resolved.

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

Hi all. I am using the Refresh Theme for my website. The desktop version looks great but need some help on the mobile version. On the homepage, on the main image banner, the heading looks perfect. But the text under it, in the text section, appears to be white on my mobile website. But the heading is black? I need the text section color to be black too. So that it can be viewed on the mobile site since the banner text appears under the banner. I hope that makes sense. Any help is greatly appreciated. My website is www.PennsylvaniaParks.org

Thanks so much!

2

@Justin34 - add this css and check

@media screen and (max-width:749px){
.banner__text strong {opacity: 1;    color: #000;}
}
1 Like
3

Hi @Justin34

You can change color of that text by adding this CSS code at the bottom of your base.css file

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

Screenshot 2023-07-19 at 11.01.10.png
Screenshot 2023-07-19 at 11.01.10.png373×483 90.1 KB

1 Like
4

@Justin34
Hello,
Add This CSS Go to Online Store >Select theme > Edit Code > Asset > base.css

@media only screen(max-width:749){
.banner__text.rte.subtitle p .banner__text strong {
	color: #000 !important;
}
}

Like This

oscprofessional_0-1689746590565.png
oscprofessional_0-1689746590565.png570×664 34.1 KB

1 Like
5

Perfect Thank You :slightly_smiling_face: