Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

How can I reduce spaces/padding?



How would I reduce the gap between these two areas (in the screenshot)?

How can I reduce this white space?

I can’t find the correct CSS to help me. I tried to make the padding around the horizontal line smaller, but for some reason it only takes the padding away from the top of the line.

And I can’t find a way to reduce the padding above and below the text block, at least without ruining the text on everything else on the page.

Really would be a big help if someone knew how to fix my problem!

Link to comment
  • Answers 4
  • Created
  • Last Reply

4 answers to this question

Recommended Posts

I'm not a Squarespace or CSS expert by any means, however I've been relentlessly playing with padding to tighten up my webpage.

The following have worked for me - you'll have to play with the values (yes, it's tedious!):

/*Padding on Horizontal Rules (Lines)*/

.sqs-block-horizontalrule hr {
  margin-top: -10px;
    margin-bottom: -10px;

/*Padding on Code Blocks*/

.sqs-block-code {
 padding-top: 0px;
 padding-bottom: 0px

/*Padding on Text Blocks*/

.sqs-block-html {
 padding-top: 5px;
 padding-bottom: 5px;

A catch all padding reduction strategy seems to be:

.sqs-block {
margin-top: -5px;
margin-bottom: -5px;
 padding-top: 0px;
 padding-bottom: 0px;

But for some reason that did not work on horizontal rules, and only sometimes on text blocks - hence the multitude of padding related code above.

I have not tested this across devices yet - and to be honest am somewhat worried that I'm ruining the aesthetics and functionality of the site! Haha!

So far, the above has helped though.

Good luck!

Link to comment


This topic is now archived and is closed to further replies.

  • Create New...