How do I get the phone icon to be next to the 24/7 text in the centre of the site header?

On 11/10/2023 at 2:43 AM, Ellagrace said:

Hi @Tuanphan,

I want the phone icon to be next to the 24/7 text in the centre of the site header.

Ive used this code, but unfortunately the phone doesn't align with the 24/7 in the centre of image and the announcement bar is smaller on mobile, is there a way to have it consistent across mobile and desktop?

.sqs-announcement-bar:before {
  content:"";
  background-image: url(https://static1.squarespace.com/static/652fee9abe21e6017b6b6127/t/654d33a98e0665620504186b/1699558313958/phone.png);
  
  background-repeat: no-repeat;
   background-size: 100%100%!important;
  padding: 0.1vw;
  padding-inline: 0.1vw;
  float: left;
  margin-top: 1.3vw;
  margin-left: 20vw;
  width: 2vw;
  height: 2vw;
  
}
.sqs-announcement-bar-text {margin-right: 1vw;
height: 3vw
}

 

Access details:

https://gerbil-sepia-2p62.squarespace.com/config

BetterGas14

Use this code instead

.sqs-announcement-bar p:before {
    content: "";
    background-image: url(https://static1.squarespace.com/static/652fee9abe21e6017b6b6127/t/654d33a98e0665620504186b/1699558313958/phone.png);
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
    background-size: contain;
    background-position: center center;
    display: inline-block !important;
    position: relative;
    top: 5px;
}