Jump to content

Need CSS code for accordion title line height

Recommended Posts

Posted

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?

Posted

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 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Posted

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 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Posted

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! 

Posted

Basically the text line height should be really close together on the title, just as it is in the body. For example other places on my website when I type in pharagraph 3 text and it reaches the text box constraint, the text makes a second line with a very small gap between.

Posted

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 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

  • 2 weeks later...
Posted

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 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

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.