Brooklyn Theme Announcement Bar on Mobile

Solved
Highlighted
New Member
3 0 0

Hello There!

 

My announcement bar is one line on computer and 2 on mobile but I feel like it could be one on mobile. Is there a way to make is smaller for mobile only? It isn't even obvious where the change would be made in the code. 

 

Announcment bar computer.PNGAnnouncment bar mobile.PNG

0 Likes
Highlighted

This is an accepted solution.

Hello @Seagods 

 

Please add below code in your CSS file at bottom in timber.scss.liquid

 

@media only screen and (max-width: 767px) {
.announcement-bar__message{font-size:11px!important;}
}

Best Regards
Parth Bhut

............................................................................................................................

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: parth.bhut143@outlook.com

Highlighted
New Member
3 0 0

Many Thanks Parth Bhut!!!!

That totally worked perfectly!

0 Likes
Highlighted
New Member
1 0 1

Hi there, Hoping you can please help. I was wondering how to change the font for the announcement bar with Brooklyn theme? Many thanks in advance. Alison 

Highlighted
Excursionist
34 0 16

Hi @ParthBhut 

I would like to reduce the heigh of the notification promo bar in the mobil. There are to much padding between the text an border and the movil need the most profitable space. I deduce a code to add but now I need to align the text in the middle of the block. Can you help me with the code to solve this?

I put 30 px because visually is what I want, but maybe there is another word to make it thinner. With "auto" there is very high. 

https://genuinner.myshopify.com/ pass Innergenu

@media only screen and (max-width: 767px) {
.notification--promo{
height: 30px;} //Tamaño Barra Promo en Mobile
}

Thanks 

Mp

0 Likes
Highlighted

Hi @alisonc 

You want to change the font family? please let me know which font you want ?

 

Thanks

Highlighted

hi @Genuinner 

 

I am not able to access the store can you please confirm you store URL so i can help you.

 

Best Wishes 

Highlighted
Excursionist
34 0 16

Hello @ParthBhut 

Please check it again because the details are ok but maybe the store wasn't on line because the trial period finished. Now is ok.

https://genuinner.myshopify.com/ pass Innergenu 

Hope you can help me.

Thnaks 

Mp

0 Likes
Highlighted

Hi @Genuinner 

Please add below code in your css file it will align text for announcement bar

@media only screen and (max-width: 750px){
.notification__inner {
    padding: 5px 0;
}
}

 

Best Wishes 

 

 

Highlighted
Excursionist
34 0 16

Hi @ParthBhut 

Thank you very much!!

It works perfect!!

Mp