Jump to content

HTML text blocks spacing is very large

Go to solution Solved by Ziggy,

Recommended Posts

Hey friends, can someone please explain to me why the spacing here is appearing so much larger on the live site versus as in the preview?

https://laepf.org/community-brigade

I used CSS to create h4, h5, and h6 font styles and then inserted code blocks that very simply contain <h5> ...</h5>. On other projects this has worked fine but for some reason the spacing here is all messed up.

See the attached screenshots of the preview versus the live site.

Thank you friends!

 

Screenshot 2022-11-14 at 10.26.56 PM.png

Screenshot 2022-11-14 at 10.24.21 PM.png

Edited by Arjuna
typo
Link to comment
  • Replies 3
  • Views 203
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

  • Solution

I'm not sure why you're seeing a difference in the editor vs live, but there are two reasons why there is space between the headings and bullet points, firstly they are all in different blocks (all blocks have a 17px padding, so that accounts for 34px of the space), and secondly the h5 has a margin top and bottom of 1.67em, you should be able to add this setting to the H5 in your Custom CSS:

image.thumb.png.a7f0dee2bf3b506c2e2dddd3bfcea279.png

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?

Link to comment
9 hours ago, Ziggy said:

I'm not sure why you're seeing a difference in the editor vs live, but there are two reasons why there is space between the headings and bullet points, firstly they are all in different blocks (all blocks have a 17px padding, so that accounts for 34px of the space), and secondly the h5 has a margin top and bottom of 1.67em, you should be able to add this setting to the H5 in your Custom CSS:

image.thumb.png.a7f0dee2bf3b506c2e2dddd3bfcea279.png

Thank you! I added

   margin-top: 0;
   margin-bottom: 0;

to the h5 in CSS.

It worked!

Link to comment

Fantastic! Can you mark my post as the solution to your question and give a thumbs up? Thanks!

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?

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.