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

Why does the spacer have a minimum size?

Question

Hi,

One of the most frustrating things about aligning blocks on your website is that there seems to be a minimum size for your horizontal (Drag up and down) spacers. Why would that be and is there a way to make the blocks as small as necessary?

Thanks

Edited by joshuar87
Initial Revision

Share this post


Link to post

19 answers to this question

Recommended Posts

  • 15

Update 10/24/2019:

Add this via the CSS Editor, save and refresh:

/* Add this first bit to get more flexibility in height. */
.sqs-layout.sqs-editing .sqs-block, .sqs-block-spacer-content {
    min-height: 0px !important;
}
.sqs-block-spacer .sqs-block-content {
  height: 0;
}

/* Add this second bit too if you want to be able to go to zero. */
.sqs-block-spacer {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

If a response helped you out, show some love by 'Like' like.jpg.6f2856e82374ca8b5041fff9ee27eef4.jpg (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left).

 

Note that the minimum width of a spacer block isn't dictated by the block, but by Squarespace's grid system. It's not an issue with the spacer block, but it's the minimum width of any block on Squarespace (technically, it's the minimum width of columns). Messing with grid column width requires a case-by-case evaluation and code-writing.

 


Original Answer:

Hi @joshuar87.

I've run into this in the past as well. The minimum height of the spacer block can seem too high for some instances.

The minimum height seems to be based on a combination of your templates default 'line-height' property, the default top/bottom gutter height (17px), and an arbitrary minimum padding set by the SS system. Finally, a min-height rule limits the spacer block when dragging it up and down in LayoutEngine.

It is possible to override these values by inserting the following CSS into the CSS Editor. Save, then refresh the page.

/*Remove minimum spacer-block height*/
.spacer-block {
   padding-top: 0;
   padding-bottom: 0 !important;
}

.spacer-block .sqs-block-content {
   line-height: 0.0em;
}

.sqs-layout.sqs-editing .spacer-block {
   min-height: 0;
}
/*End remove spacer-block height*/

 

Keep in mind that if Squarespace changes their code, this kind of CSS can stop working at any time.

Let me know how this works for you.

-Brandon

Edited by brandon
Initial Revision

If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Share this post


Link to post
  • 2

Hi Brandon,

Do you have a version of this that can reduce the minimum width of a spacer? I have one placed at the side and I'd like to shrink it!

Thanks v much!Paul

Share this post


Link to post
  • 0

@joshuar87 Great. If you wouldn't mind marking my answer as accepted, that'd be appreciated.

Edited by brandon
Initial Revision

If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Share this post


Link to post
  • 0

Works brilliantly thanks!

To others who try this, once you have inserted the code, don't expect your site to respond by automatically reducing the Spacer Blocks to 0 - you have to go and click on each one and then you'll see the grey circle, and can drag the Spacer to as small as you like.

Thanks @BrandonW

Share this post


Link to post
  • 0

Works brilliantly thanks!

To others who try this, once you have inserted the code, don't expect your site to respond by automatically reducing the Spacer Blocks to 0 - you have to go and click on each one and then you'll see the grey circle, and can drag the Spacer to as small as you like.

Thanks @BrandonW

Share this post


Link to post
  • 0

Nice! Thanks for posting. Side note: I converted your Answer to a Comment (it's easy to accidentally post an answer instead of a comment). Up-voting useful answers is also helpful. Best!


If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Share this post


Link to post
  • 0
Guest

Tried the code and it's not working for me :( Any idea if squarespace has updated something and that is why, or am I possibly entering it wrong? Thanks!

Share this post


Link to post
  • 0

Hey @BrandonW

Thanks so much for the code! Is there any chance you could suggest how to override the minimum width of a spacer? All my attempts to modify your original code seem to fail!

Thanks again!

Share this post


Link to post
  • 0

@BrandonW, Celia, It still worked for me April 2018 in Brine (Moksha). Maybe because I put it at the top of my CSS list along with my other overall site styles?

Share this post


Link to post
  • 0

Hi all. I've updated the answer. I've left the previous answer as well in case that works better for others. In general, you can inspect the code and form your own custom CSS by using your browser's developer tools/inspector. However, hopefully the code above is all you'll need.


If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...