Solved

Changing text in announcement bar on mobile

vitoria_muka
New Member
5 0 0

Hi,

 

I made the text in my announcement bar bold and changed the color to white, but these changes are not being applied on mobile. How can I make it look the same on mobile as it does on desktop?

 

Thanks

Accepted Solution (1)
ThePrimeWeb
Shopify Partner
2136 612 478

This is an accepted solution.

Hey @vitoria_muka,

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
@media only screen and (max-width: 749px){
    p.announcement-bar__message.h4 {
        font-weight: bold !important;
        color: white !important;
    }
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1708525304243.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

Replies 8 (8)

TerenceKEANE
Shopify Partner
428 79 72

hello,

 

if u send me your store url, we can help!

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ If I helped you, Please don't forget to Like and Mark Solution to the post that helped you. --> Our Website
If my support was a lifeline for you, The COFFEE   would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites
vitoria_muka
New Member
5 0 0

https://muka.pt/

 

Thanks!

TerenceKEANE
Shopify Partner
428 79 72

use these.

 

@media (max-width: 991.98px){
p.announcement-bar__message.h4 {
font-weight: 600;
color: white;
}
}

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ If I helped you, Please don't forget to Like and Mark Solution to the post that helped you. --> Our Website
If my support was a lifeline for you, The COFFEE   would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites
vitoria_muka
New Member
5 0 0

Didnt work 😞

ThePrimeWeb
Shopify Partner
2136 612 478

Hey @vitoria_muka,

 

Could you please share the link to your store please? Thanks!

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
vitoria_muka
New Member
5 0 0

https://muka.pt/

 

Thanks!

ThePrimeWeb
Shopify Partner
2136 612 478

This is an accepted solution.

Hey @vitoria_muka,

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
@media only screen and (max-width: 749px){
    p.announcement-bar__message.h4 {
        font-weight: bold !important;
        color: white !important;
    }
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1708525304243.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
vitoria_muka
New Member
5 0 0

It worked! Thank you! 🙂