How can I fix the image banner color and size issues on my mobile site?

Store Design
1

Okay, so my image banner looks great on my desktop. However, on my mobile, it is messed up.

Under the mobile layout section in the designer, I have the stack images on mobile and the show container on mobile checked. The heading text shows up as black on the mobile and white on my desktop. I want the text section to show up black on mobile and white on desktop too. How do I go about doing that? Also, how do I make the heading and text sections text smaller so it takes up less space.

My website is www.PennsylvaniaParks.org

Thanks so much in advance for any assistance you can provide.

2

@Justin34 - add this css to make text black on mobile, it will look like screenshot below

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

suyash1_0-1682647708640.png
suyash1_0-1682647708640.png1366×768 106 KB

3

Where do I add that code on my site?

4

@Justin34 - very end of your base.css file

5

Worked perfectly :slightly_smiling_face: Thank you!

Do you know by chance how to make my text area wider on mobile version? Its perfect on my desktop. But on my phone, there is alot of white area around the text on my homepage. If I could make the text space wider (closer to the edge of the screen) I think it would look better. Thank you.