Jump to content

Padding around a line block

Go to solution Solved by MAC1,

Recommended Posts


I've been playing around with padding/spacing a line under text. Issue is the line padding changes depending on size of screen. 
I was wondering if there was some universal css code for the line block so its always has the same padding top and bottom. keeping everything well spaced to the desired design.

not sure if something like this would work, just need to target the line block if i knew the right targeting.

/* Apply padding to Line blocks */
.sqs-block-line {
    padding-top: 50px; /* Adjust as needed */
    padding-bottom: 50px; /* Adjust as needed */

web: https://ellipse-teal-dl5w.squarespace.com/design/glitch-mx
pass: 2


some extra information just in case below--

full width line padding between text is fine:


half width page line padding reduces more on top than bottom


reduce more and line goes too close to top title:


Link to comment

This isn't the padding, it's the way that the rows react responsively when you adjust the viewport size. Since you have the line block and text block partially overlapping they don't react to each other. I would suggest removing any overlap, and tweaking the alignment of the text blocks to bottom aligned for the top text block, and top aligned for the bottom text block, and the line block center aligned.

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

Zygmunt Spray
Squarespace Website Designer
Contact me: 

🔌 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
/* Apply padding to all Line blocks */
.sqs-block-horizontalrule   {
    padding-top: 20px !important; /* Adjust as needed */
    padding-bottom: 20px !important; /* Adjust as needed */

I found something that works its ".sqs-block-horizontalrule" targets all lines

with proper alignment text top (bottom alignment), line (middle align), bottom text (top align) , the line spacing stays the same with the padding code attached. thanks @Ziggy

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.