How to reduce height of announcement bar in Impulse theme?

[Caneleo1234]

Hi guys,

I added the code in 'Sections' for announcement-bar.liquid and it worked great! Only thing is I can't work out how to reduce the height of the announcement bar at the very top of the page. I have turned it off because it's too ugly (almost double the height I want it to be because I want it to be identical to the one under the header).

Any ideas how I can edit the code to reduce the height? I'll copy/paste the code from announcement-bar.liquid below in case that helps. Thanks so much if you can help!

<style>
.announcement-bar {
background-color: {{ section.settings.announcement_bar_color }};
text-align: center;
text-decoration: none;
}
.announcement-bar__message {
font-size: large;
padding: 0px;
color: {{ section.settings.announcement_bar_text_color }};
}

</style>

{%- if section.settings.show_announcement -%}
{%- if section.settings.home_page_only == false or template.name == 'index' -%}

{%- if section.settings.link == blank -%}
<div class="announcement-bar">
{%- else -%}
<a href="{{ section.settings.link }}" >
{%- endif -%}

<p class="announcement-bar__message">{{ section.settings.text | escape }}</p>

{%- if section.settings.link == blank -%}
</div>
{%- else -%}
</a>
{%- endif -%}

{%- endif -%}
{%- endif -%}

{% schema %}
{
"name": "Announcement bar",
"settings": [
{
"type": "checkbox",
"id": "show_announcement",
"label": "Show announcement",
"default": false
},
{
"type": "checkbox",
"id": "home_page_only",
"label": "Home page only",
"default": true
},
{
"type": "color",
"id": "announcement_bar_color",
"label": "Background color",
"default": "#000000"
},
{
"type": "color",
"id": "announcement_bar_text_color",
"label": "Text color",
"default": "#ffffff"
},
{
"type": "text",
"id": "text",
"label": "Announcement text",
"default": "Announce something here"
},
{
"type": "url",
"id": "link",
"label": "Announcement link"
}
]
}
{% endschema %}

[LitExtension]

Hi @Caneleo1234,

Please change code CSS:

.announcement-bar {
background-color: {{ section.settings.announcement_bar_color }};
text-align: center;
text-decoration: none;
}
.announcement-bar__message {
font-size: large;
padding: 0px;
color: {{ section.settings.announcement_bar_text_color }};
}

=>

.announcement-bar {
background-color: {{ section.settings.announcement_bar_color }};
text-align: center;
text-decoration: none;
padding: 5px 0;
}
.announcement-bar__message {
font-size: 15px;
padding: 0px;
color: {{ section.settings.announcement_bar_text_color }};
margin-bottom: 0;
}

Hope it helps!