Jump to content

Align cart icon with text in 7.1

Go to solution Solved by tuanphan,

Recommended Posts

Site URL: https://cornet-green-nakz.squarespace.com/

Hi! I'm quite new to coding, any help or suggestion is much appreciated!

I used the following code to customize the cart icon and add text underneath. But I can't align the icon to the right. Image is attached for reference, thank you!

1817366454_aligncart.thumb.jpg.7a36db5eaa9cf4e777185f0bec36e832.jpg

.header .header-actions-action--cart .icon {
  background: url(https://static1.squarespace.com/static/62ec1ff71a3945114dc3c287/t/630e588ddcbf3277a04fa082/1661884557772/List.png) center no-repeat;
  stroke: transparent !important;
  content: "";
  background-size: contain;
  
}
.header .header-actions-action--cart:after {
  content: "Quote/Sample List";
  color: #000;
  font-size: 12px;
  font-weight: 400;
  text-align: right;
  margin-top: 10px;
  margin-bottom: 0px;
  letter-spacing: 0px;
  width: 100% !important;
  display: inline-block;
}

 

Edited by Trish-p
Link to comment
  • Trish-p changed the title to Align cart icon with text in 7.1
  • 2 weeks later...
On 9/3/2022 at 8:06 AM, tuanphan said:

Hi. What is password?

image.png.b7483d6c2a93461f93d5f161c16a5fe3.png

Hi, password is "trial"

I was able to break the text to the second line, and center align it to the icon by setting both widths to 60 px. But how can I move the cart number so it's closer to the icon? I appreciate any suggestions. Thank you.

.header .header-actions-action--cart .icon {
  background: url(https://static1.squarespace.com/static/62ec1ff71a3945114dc3c287/t/630e588ddcbf3277a04fa082/1661884557772/List.png) center no-repeat;
  stroke: transparent !important;
  content: "";
  background-size: contain;
  width: 60px;
  
}
.header .header-actions-action--cart:after {
  content: "Quote/ Sample List";
  color: #000;
  font-size: 11px;
  font-weight: 400;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 0px;
  letter-spacing: 0px;
  width: 60px;
  word-wrap: break-word;
  display: inline-block;
}

 

cart icon.jpg

Edited by Trish-p
new question
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.