Changing text in announcement bar on mobile

vitoria_muka · ‎02-21-2024

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

ThePrimeWeb · ‎02-21-2024

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.

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

TerenceKEANE · ‎02-21-2024

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!
★ Get skilled Shopify developers at BUDGET-FRIENDLY RATES — explore Novajetsoft.com for a rapid quote!
☕ 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 · ‎02-21-2024

https://muka.pt/

Thanks!

TerenceKEANE · ‎02-21-2024

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!
★ Get skilled Shopify developers at BUDGET-FRIENDLY RATES — explore Novajetsoft.com for a rapid quote!
☕ 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 · ‎02-21-2024

Didnt work 😞

ThePrimeWeb · ‎02-21-2024

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 · ‎02-21-2024

https://muka.pt/

Thanks!

ThePrimeWeb · ‎02-21-2024

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.

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 · ‎02-21-2024

It worked! Thank you! 🙂

Changing text in announcement bar on mobile