Mobile Information Bar - hide icon and increase font size

Site URL: https://sunflower-accordion-z2d3.squarespace.com/

I currently have the below code in Custom CSS:

// Floating Mobile Info Bar //
.sqs-mobile-info-bar {
  background-color: #e33c31 !important;
  border-radius: 100px;
  margin: 5%;
  width: 90%;
}

I've attached a visual of how this appears on mobile and how I'd like to change it i.e. hide the icon, increase the font, make the bar narrower but centred on the screen. 

Thanks in advance for any advice.

Hi.

Can you enable mobile info bar? I checked & dont see it now

Hi @tuanphanyes the mobile info bar is enabled 🙂

Thanks

Anna 

This was exactly what I was looking for. Thank you so much! I need one adjustment. My client still wants both EMAIL and CALL and I'm having trouble getting them to be spaced apart far enough for good usability.

It has something to do with the width code. This is what I added to the CSS:

But, this is what shows up when I inspect. The 45% isn't working.

When I tested the CSS is a validator I got this error message.

I'm going for the look on the left and I have what's on the right.

Any advice?
Thanks!

On 5/19/2022 at 5:29 AM, nwhittlesey said:

This was exactly what I was looking for. Thank you so much! I need one adjustment. My client still wants both EMAIL and CALL and I'm having trouble getting them to be spaced apart far enough for good usability.

It has something to do with the width code. This is what I added to the CSS:

.sqs-mobile-info-bar-trigger {

cursor: pointer;

display: inline-block;

padding: 15px 0;

text-align: center;

width: 45% !important;

}

But, this is what shows up when I inspect. The 45% isn't working.

 

When I tested the CSS is a validator I got this error message.

 

I'm going for the look on the left and I have what's on the right.

Any advice?
Thanks!

What is site url? above site, it looks like he disabled mobile bar.

Sorry, I'm just seeing this now. The website is supercubes.com. My code is:

/* Mobile Info bar */
.sqs-mobile-info-bar-trigger {
       cursor: pointer;
       display: inline-block;
      padding-top: 15px;
       padding-bottom: 15px;
    text-align: center;
       width: 45% !important;}
.sqs-mobile-info-bar {
      background: #FF3333 !important;
    margin-left: 8%;
    margin-right: 8%;
    margin-bottom: 10%;
    width: 84%!important;
    box-shadow: rgba(0, 0, 0, 0.35)     0px 5px 15px;}
span.sqs-mobile-info-bar-trigger-icon {
    display: none;}
span.sqs-mobile-info-bar-trigger-label {
    font-size: 18px;
    font-weight: 500;}
/* END Mobile Info bar */

I just checked the CSS validator again and it checks out. Can't figure out why it's not working.

4 hours ago, nwhittlesey said:

I just checked the CSS validator again and it checks out. Can't figure out why it's not working.

Use this CSS

.sqs-mobile-info-bar-triggers>div:first-child {
    float: left;
}
.sqs-mobile-info-bar-triggers>div:last-child {
    float: right;
}

Excellent! I figured there was a way to identity first and last child, but couldn't get it. Thank you so much!