How can I increase the size and font of my announcement bar?

Technical Q&A
1

Hey Guys trying to edit some code in my store: www.kaieda.com.au

I am looking to increase the size of the announcement bar and font as well as make it bold but unsure where to insert this code. I am using the expression theme as well if that helps.

I have managed to find the part of the code for the announcement bar but unsure how to proceed from here:

{%- assign default_tab_height = 76 -%}
{% if section.settings.show_announcement_bar %}

{% style %} .announcement-bar { color: {{ section.settings.announcement_bar_text_color }}; background-color: {{ section.settings.announcement_bar_bg }}; }

.announcement-bar a {
color: {{ section.settings.announcement_bar_text_color }};
text-decoration: none;
}
.announcement-bar–has-link:hover {
background-color: {{ section.settings.announcement_bar_bg | color_darken: 10 }};
}
{% endstyle %}
{% if section.settings.announcement_bar_url != blank %}{% endif %}

{{ section.settings.announcement_bar_text }}
{% if section.settings.announcement_bar_url != blank %}{% endif %} {% endif %}
2

@kaieda_au , do this to fix it in 20 seconds:

  1. In your Shopify Admin go to: online store > themes > actions > edit code
  2. Find Asset > styles.css and paste this at the bottom of the file:
.announcement-bar__content{
    font-size: 20px !important;
    font-weight: bold;
}

@media (max-width: 767px){
    .announcement-bar__content{
    font-size: 12px !important;
}
}

You can change the values as per your wish:

20px = font size on desktop
12px = font size on mobile

If you’d like to remove the bold, just delete the font-weight: bold; line.

Kind regards,
Diego

3

Try adding this rule to bottom of styles.css

.announcement-bar {
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 1.1em;
    font-weight: bold;
}

Result:

2021-08-11 22_14_53.png
2021-08-11 22_14_53.png1711×400 69 KB

4

hello @kaieda_au

please Go to Online Store->Theme->Edit code then go to assets/style.css ->paste below code at the bottom of the file.

.announcement-bar__content{
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 18px !important;
    font-weight: bold;
}
@media (max-width: 767px){
    .announcement-bar__content{
    font-size: 12px !important;
    padding-top: 5px;
    padding-bottom: 5px;
}
}