Jump to content

problem customising bullet points

Recommended Posts

Hi! Just replace the original CSS with the following rule. I added a 

background-repeat: no-repeat; property which specifies that the background image should not be repeated.

section[data-section-id="61d855d46e3d6a026e08e5bb"] ul[data-rte-list] li>*:first-child::before {
    content: '';
    height: 16px;
    top: 30px;
    left: 0px;
    width: 16px;
    background-image: url(https://static1.squarespace.com/static/615c38d…/t/6220aee…/1646309095566/arrow-02.png);
    background-size: contain;
    margin-right: 5px;
    background-repeat: no-repeat;
}

 

Link to comment
1 hour ago, Leanne_M said:

Site URL: https://bamboo-rabbit-99gt.squarespace.com/config/design

Hello!

I am trying to customise the bullet points on my services page. I have been able to add in the new bullets but they're duplicating to fill a space. How can I make it so that only one arrow is visible for each bullet?

password: !(cX3Ly@$323cC( 

Thank you!

Screenshot 2022-03-03 at 12.38.18.png

 

21 minutes ago, Leanne_M said:

@Caroline_Smith Thank you, that's worked! Do you know how I can reduce the amount the bullets are indented by? I'd like to make the gap between the arrow and the copy smaller.
 

Try adding a negative margin-right value:

section[data-section-id="61d855d46e3d6a026e08e5bb"] ul[data-rte-list] li>*:first-child::before {
    content: '';
    height: 15px;
    top: 30px;
    left: 0;
    background-image: url(https://static1.squarespace.com/static/615c38d…/t/6220aee…/1646309095566/arrow-02.png);
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: -14px;
}

 

Link to comment
On 3/3/2022 at 10:26 PM, Leanne_M said:

Thank you! That worked perfectly. One last thing (hopefully)... when viewed on mobile the arrows are a tiny amount higher than the bullets. I've attached a screenshot. How do I bring them back in line with the bullets please?

Screenshot 2022-03-03 at 15.24.41.png

Do you still need help on this?

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 3/6/2022 at 2:25 PM, Leanne_M said:

@tuanphan yes I do please. They are still a touch out of line.

Try adding this to Design > Custom CSS

@media screen and (max-width:767px) {
section[data-section-id="61d855d46e3d6a026e08e5bb"] ul[data-rte-list] li>*:first-child::before {
    top: 26px !important;
}
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.