How can I increase the size of the cross on the Announcement Bar?

Site URL: https://bluebird-porcupine-yzdg.squarespace.com/home

Hello, I have an announcement bar at the top of my site. Is it possible to increase the small cross to close it down? It currently looks really small.

https://bluebird-porcupine-yzdg.squarespace.com/home

Many thanks!

Hi,

.sqs-announcement-bar-close {
 font-size: 2.3em;}

Hey Erika, thank you that's AWESOME! Worked real good, thanks again!👍👍👍

Great stuff 🙂

I just noticed, if I make the X bigger say 3.5em, is there a way to make it more centred? It drops to the bottom. Thanks!

On 3/26/2021 at 4:18 PM, scholarsayze said:

I just noticed, if I make the X bigger say 3.5em, is there a way to make it more centred? It drops to the bottom. Thanks!

have you solved it yet?

Not yet Tuanphan.

As my site is live I had to add some additional code like this:

/* ANNOUNCEMENT BAR CLOSE SIZE */
@media screen and (min-width:768px) {
.sqs-announcement-bar-close {
 font-size: 2.3em;}
}
 

So that this only takes effect on desktop for now. If I didn't it was making it look odd on mobile.

Please help if there is an alternative fix.

Thank you!

On 3/30/2021 at 2:55 PM, scholarsayze said:

Not yet Tuanphan.

As my site is live I had to add some additional code like this:

/* ANNOUNCEMENT BAR CLOSE SIZE */
@media screen and (min-width:768px) {
.sqs-announcement-bar-close {
 font-size: 2.3em;}
}
 

So that this only takes effect on desktop for now. If I didn't it was making it look odd on mobile.

Please help if there is an alternative fix.

Thank you!

Add to Design > Custom CSS

.sqs-announcement-bar-close:after {
    font-size: 2em;
    line-height: 1.5em;
}

Thanks Tuanphan much appreciated !