problem customising bullet points

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!

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

@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.
 

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!

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

@Caroline_Smith 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?

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?

Do you still need help on this?

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

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

2 hours ago, tuanphan said:

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

 

@tuanphan I'm afraid that hasn't made any difference.