change font size of announcement bar desktop

[ads18922]

hello, i want to change the font size of my announcement bar for desktop, but keep it the same for mobile

website is www.marcomontesi.com , theme is dawn

[Dan-From-Ryviu]

Hi @ads18922 

Please add this code to Custom CSS in Sale Channels > Online Store > Themes > Customize > Theme settings. 

@media (min-width: 750px) {
html p.announcement-bar__message.h5 {
    font-size: 12px;
}
}

[rifat_Shop]

@ads18922 hi hope you are well,
please use this css on base.css file on your theme

p.announcement-bar__message.h5 {
    font-size: 20px !important;
}

update size base on px

please let us know
Thank you

[DaisyVo · Accepted solution]

HI @ads18922 

To complete your requests, please follow these steps:

1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
2. Paste the code provided into the Custom CSS section.

@media screen and (min-width: 1024px){
p.announcement-bar__message {
    font-size: 20px !important;
}
}

Here is the result: 

I hope this helps

Best,

Daisy

[sadik_ShopiDevs]

Hi @ads18922 
Please follow the steps
Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
@media screen and (min-width: 990px) {
    p.announcement-bar__message.h5 {
        font-size: 20px;
    }
}
</style>

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a

solution. Thank you 😍

[Rahul_dhiman]

Hello @ads18922 
Go to online store ----> themes ----> actions ----> edit code ---->base.css
add this code at the end of the file and save.

@media only screen and (min-width: 750px) {
h5, .h5 {
font-size: calc(var(--font-heading-scale)* 1.7rem);
}
}

result

If this was helpful, hit the like button and accept the solution.
Thanks