CuriousHeron Posted November 12, 2022 Share Posted November 12, 2022 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
Ziggy Posted November 12, 2022 Share Posted November 12, 2022 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 🔌 Ghost Squarespace Plugins (Referral link)📈 SEO Space (Referral link)⬛ SquareWebsites Plugins (Referral link)☕ Did I help? Buy me a coffee? Link to comment
CuriousHeron Posted November 14, 2022 Author Share Posted November 14, 2022 https://heartradiancemedicine.com/faqs Link to comment
Ziggy Posted November 14, 2022 Share Posted November 14, 2022 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 🔌 Ghost Squarespace Plugins (Referral link)📈 SEO Space (Referral link)⬛ SquareWebsites Plugins (Referral link)☕ Did I help? Buy me a coffee? Link to comment
CuriousHeron Posted November 20, 2022 Author Share Posted November 20, 2022 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
CuriousHeron Posted November 20, 2022 Author Share Posted November 20, 2022 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. Link to comment
Ziggy Posted November 21, 2022 Share Posted November 21, 2022 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 🔌 Ghost Squarespace Plugins (Referral link)📈 SEO Space (Referral link)⬛ SquareWebsites Plugins (Referral link)☕ Did I help? Buy me a coffee? Link to comment
CuriousHeron Posted December 3, 2022 Author Share Posted December 3, 2022 Thanks soooooo much, exactly what I wanted! you rock, have a beautiful day! Ziggy 1 Link to comment
Ziggy Posted December 5, 2022 Share Posted December 5, 2022 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 🔌 Ghost Squarespace Plugins (Referral link)📈 SEO Space (Referral link)⬛ SquareWebsites Plugins (Referral link)☕ Did I help? Buy me a coffee? Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment