How to change announcement bar thickness within header?

Store Design
,
1

Hi there! I am wanting to make my announcement bar within my header thinner for MOBILE. I am new to media queries so I am stuck on some of the syntax and how to apply it to my code. Currently the announcement bar looks good on desktop but I would like it thinner on mobile. This is how it looks right now:

williamk0601_0-1669932069661.png
williamk0601_0-1669932069661.png357×434 18 KB

The orange part is what I would like to make thinner.

Here is the link to the preview: https://b50vcq6bm9o4mjwh-55086776342.shopifypreview.com/

I am comfortable with editing code. Thank you!

2

Hi @williamk0601 :waving_hand:

I can see the font size is smaller now on mobile, but not properly aligned. So you can add this code

@media only screen and (max-width: 46.85em)
.announcement-bar p {
    padding: 10px 32px;
}

Looks much better on mobile

Screenshot 2022-12-02 at 09.32.56.png

3

@williamk0601

You can please adding script code below at to bottom of /assets/peko.css file,

@media only screen and (max-width: 768px){
.announcement-bar__message{
  line-height: 2rem;
  height: 100%;
}
}

Hope can helpful to you!

4

Hi @williamk0601 ,

Go to Assets > theme.min.css and paste this at the bottom of the file:

@media only screen and (max-width: 46.85em) {
.announcement-bar {
    height: auto !important;
    margin-bottom: 0 !important;
}
.announcement-bar__message {
  padding: 1rem 3rem !important;
}
}

Hope it helps!

5

@williamk0601

add this code to your theme.min.css file.

Navigate to online store >> Click edit theme code.

Now find theme.min.css and paste the following code:

@media (max-width: 786px){
.announcement-bar{
    max-height: 75px !important;
	
}
.announcement-bar__message{

	    font-size: 1.5rem;
}

}