Adjust Height of Announcement Bar in Mobile

Hi All!

BIG QUESTION!

I have added custom code to have an image in the announcement bar. And it looks great on desktop.

However, in mobile view the announcement bar needs to be larger in height and the image needs to be bigger. What to do?

Here is the css code I am using for the announcement bar currently:

.sqs-announcement-bar:before {
  content:"";
  background-image: url(https://static1.squarespace.com/static/626182fac67c5563ad2be7aa/t/62dab342baafeb4a6b3e14ba/1658499906283/noun-under-construction-4891363.png);
  background-repeat: no-repeat;
  background-size: contain;
  float: right;
  margin-left: 150vw;
  width: 50vw;
  height: 2.5vw;
}
.sqs-announcement-bar-text {margin-right: 2vw;
height: 2.5vw}


.sqs-announcement-bar {background: linear-gradient(to right, #ffcc00, #ffff00, #ffcc00)!important}

What do I do to increase the height of the announcement bar and increase the size of the image in mobile view?

Hi. What is site url?

Hi Tuanpan:

To see it go here:
www.ArcheryPassport.com

Password=
archeryp@ssp0rt

I appreciate you Tuanphan! Let me know what I should do. Thanks.

Best,

-Brian-

On 7/23/2022 at 10:00 PM, BriGuy said:

Hi Tuanpan:

To see it go here:
www.ArcheryPassport.com

Password=
archeryp@ssp0rt

I appreciate you Tuanphan! Let me know what I should do. Thanks.

Best,

-Brian-

Add this CSS under

@media screen and (max-width:991px) {
.sqs-announcement-bar-text {
    height: auto !important;
}
.sqs-announcement-bar:before {
    height: 10vw;
    position: relative;
    left: -5vw;
}
}

@tuanpan VERY CLOSE! The text is now perfect... however, the image I have appearing above the text is really, really tiny (and just a tad off center). Any way to have the image appear larger in mobile (and be centered)?

20 hours ago, BriGuy said:

@tuanpan VERY CLOSE! The text is now perfect... however, the image I have appearing above the text is really, really tiny (and just a tad off center). Any way to have the image appear larger in mobile (and be centered)?

you can add width value to this code on the code I sent

.sqs-announcement-bar:before {
    height: 10vw;
    position: relative;
    left: -5vw;
}

10 hours ago, tuanphan said:

you can add width value to this code on the code I sent

.sqs-announcement-bar:before {
    height: 10vw;
    position: relative;
    left: -5vw;
}

 

Hi @tuanphan - thanks! The image is now centered. But is still tiny in mobile view. Any way to have that image be bigger in mobile view?

On 7/28/2022 at 1:42 AM, BriGuy said:

Hi @tuanphan - thanks! The image is now centered. But is still tiny in mobile view. Any way to have that image be bigger in mobile view?

Edit this line

Quote

height: 10vw;

to

height: 10vw !important;

@tuanphan you're a genius! That worked! Thanks!