Jump to content

Need CSS code for accordion title line height

Recommended Posts

Is there a CSS code that would adjust the line height on the accordion block?

On my website, I have added an accordion to my FAQ page. It is exactly the thing I need on this page (I can't think of anyway to make this myself, all things I make myself would always open a link in a new window or page, I want this accordion feature).

The issue is that the line height is way too big, I don't understand why this is the case, nowhere else when typing text where there are more than one line is the line height so large. It doesn't really show up on most desktop screens as the titles are not so long, but it really looks bad on a mobile view. Is there a CSS code that would adjust the line height on the accordion block?

Link to comment

Can you share your website URL and page? (site wide password if your site isn't live)

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

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

  Did I help? Buy me a coffee?

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

Link to comment

The text line-height looks consistent (1.4) on the accordion and on other parts of your website. Can you help me identify what you're trying the change?

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

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

  Did I help? Buy me a coffee?

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

Link to comment

Hi Ziggy, thanks for the help! So on a desktop the titles on the accordion look fine because the titles are short enough that they don't make a second line. And yes the body text in the accordion looks great both on desktop and mobile. But if you look at the website on a mobile (or was the case when I previously had longer titles on a desktop because the longer title caused there to be 2 lines of title text), then the multiple lines on the title text are huge distances! It looks like there is a paragraph space between each line even though it is a continuous line of text. Look on a mobile, it looks terrible and huge.

Thanks! 

Link to comment

Try this Custom CSS:

.accordion-item__title {
  line-height:1.4em;
}

 

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

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

  Did I help? Buy me a coffee?

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

Link to comment
  • 2 weeks later...

Glad to help!

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

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

  Did I help? Buy me a coffee?

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

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.