Re: Change Announcement Bar Font and Size - Ride Theme

Change Announcement Bar Font and Size - Ride Theme

LEEDIA
Excursionist
25 0 6

Hi, I would like to change the font in the announcement bar from the current bold one to the one used in the header and product description page (using "Sans-serif" system font), and to then separately adjust the font size for desktop view only. I appreciate any help.

 

website: https://leediastore.com/

 

Thanks!

announcement-bar.jpg

Replies 6 (6)

Spac-es
Shopify Partner
391 112 143

Add this codes inside your base.css or theme.css.

 

Change the font family in the announcement bar:

p.announcement-bar__message.h5 {
    font-family: sans-serif !important;
}

Adjust the font size for desktop view only:

@media only screen and (min-width: 768px) {
    p.announcement-bar__message.h5 {
        font-size: 25px;
    }
}

 I hope that helped!

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!
LEEDIA
Excursionist
25 0 6

The font size code worked but for some reason the font family didn't change. 

Spac-es
Shopify Partner
391 112 143

Here's the issue (base.css - line 283):

font-family: 'outersans' !important;

 If you remove the !important, my code will work!

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!

ZenoPageBuilder
Shopify Partner
1052 203 225

Hello @LEEDIA 👋

Inside Shopify Admin, you can go to Edit theme code, open file base.css and add this code at the bottom

.announcement-bar__message {
    font-family: var(--font-body-family) !important;
}

@media (min-width: 750px) {
    font-size: 20px;
}

The result on desktop

Screenshot 2023-12-21 at 10.07.45.png

Hope that helps!

Zeno Page Builder - Build responsive & SEO-optimized Landing pages, Blog posts, Product pages and more...
Learn more at zenobuilder.com
LEEDIA
Excursionist
25 0 6

I appreciate the help but it's still not changing the font itself, seems like it's being overridden by another line of code that sets the heading fonts to the bold one. Not sure how to fix this.

ZenoPageBuilder
Shopify Partner
1052 203 225

Hi @LEEDIA 👋

Try using this code instead

#shopify-section-sections--21211832713521__announcement-bar .announcement-bar__message {
    font-family: var(--font-body-family) !important;
}

@media (min-width: 750px) {
    #shopify-section-sections--21211832713521__announcement-bar .announcement-bar__message {
    font-size: 20px !important;
}
}

 

Zeno Page Builder - Build responsive & SEO-optimized Landing pages, Blog posts, Product pages and more...
Learn more at zenobuilder.com