Jump to content

Random en dashes appearing on top of each team profile pic (after using code to change all bullet points to dash lists)

Go to solution Solved by Ziggy,

Recommended Posts

I have an issue of random en dashes appearing on top of each team member profile pic. This issue occured after I added custom CSS code for changing bullet lists to dashed lists instead. I have pasted the following code in custom css of my site:

/* change the bullet point symbol to a unicode character */
li>*:first-child::before{content:"—"!important;color:#000000}

/* move bullet list to left */
ul {
  padding-left: 1.5rem
}

I am happy with how the dashed bullet list looks but random dashes appear on top of each team member profile of the website. I have dashed lists looking perfect where they're needed on various pages of the website. The team profiles page does not include any bullet lists.

Can anyone help me fix this issue? Help would be greatly appreciated.

Screenshot 2023-10-19 at 17.26.31.png

Screenshot 2023-10-19 at 17.26.43.png

Link to comment

Unordered Lists (<ul>) get used for more than just bullet points, the list section that you are using for the Team photos is one of those, so with your style code targeting all <ul> and <li> it will impact more than you want. You probably want to target it just to paragraph text, which is usually achieved by adding an additional ID of to your code. I can't tell exactly what you need as I would need to see your website for that.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
  • Solution

Try this code as an alternative:

// change the bullet point symbol
ul[data-rte-list] li>*:first-child::before {
  content: "—" !important;
  color:#000000;
}

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

BTW it looks like you have "display source code" checked on this code block which is displaying the code as text rather than rendering it as you'd want.

image.png.1806eb22a270c32bd0581fdd5d6de8ad.png

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

That has fixed the issue – thank you so much! What line of code shall I insert below the color line if I wanted to have the dashed list aligned to the left with the text above?

Thanks for the shout about the Solicitors Regulation Authority logo for the footer of website!

Screenshot 2023-10-20 at 13.44.48.png

Edited by Jefferson0123
Link to comment

Try this:

ul[data-rte-list] li>*:first-child::before {
    margin-left: -55px;
}

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

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.