Top banner text not showing up on mobile

[Foxesanddoe]

I tried different solutions that were posted under a similar subject, googled, and used ChatGPT, but nothing has worked. I am a total newbie. The top banner text on my website (www.foxesanddoe.com) shows in desktop but not in mobile. In mobile, the text appears for a brief moment and then it is gone. I can select, copy, and paste, but it is not visible after the first instance. Please help. 

[CodingFifty]

Hi @Foxesanddoe,

Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css/main.css/custom.css file Add the provided code at the end of the file.

@media (max-width: 768px){
p.announcement-bar__message.h5 {
    color: white !important;
}
}

[Foxesanddoe]

Thank you, but it did not work.

[Made4uo-Ribe · Accepted solution]

Hi @Foxesanddoe 

Try this one. 

1. From your Shopify admin dashboard, click on "Online Store" and then "Themes".
2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
3. In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.announcement-bar p {
    color: white !important;
}

• And Save.
• Result:
• 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[Foxesanddoe]

Thank you, but it did not work.

[Made4uo-Ribe]

You have another code that make this changes. 

Im not sure where you paste this code either on theme.liquid or the custom css from the theme edit. 

Im not sure which one you use this code , but this the main reason of your announcement bar like that.

[Foxesanddoe]

Hello. Thank you for the feedback. I have been copying and pasting trying to fix the issue, so that is why you might see extra codes that do not belong. I am too scared to erase anything because I do not know what is extra or not. Anyway, I wanted to tell you that I used the code you gave me and placed it in the Cutom CSS inside the website editor and inside the announcement bar section, and it worked. Thank you so much! 

[Made4uo-Ribe]

Oh that is good to hear, if you paste it on the custom css from the custom editor you can remove this code in the base.css

And Save. 

Here, developers will mostly assist you.