Jump to content

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

Go to solution Solved by tuanphan,

Recommended Posts

Hi,

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
}

 

 

Edited by Ellagrace
Wrong information
Link to comment
  • Replies 2
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

  • Solution
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

Screenshot 2023-11-09 at 19.36.38.png

Screenshot 2023-11-09 at 19.41.43.png

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;
}

image.png.3df6ee013fa79174cb6b1b14448530a0.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.