Jump to content

Text block bottom space uneven due to grid

Recommended Posts


I was unable to find something about the uneven bottom space of text blocks and I'm surprised because it major consistency problem.

In this example with screenshots attached:

  • I create a text block that has 5 lines of text, it takes 4 rows + bleeds into the spacing so it includes a full row as bottom margin.
  • Now I create a text block that has 3 lines of text, it takes 3 rows so the text height is 3 rows.

This means the first block of text has 1 row as additional bottom spacing and the second has a random half row as bottom spacing. When you code a website it doesn't matter if the paragraph has 3 or 5 of text, you set an automatic bottom margin of N pixels and it'll be the exact same everywhere.

And this is what I want, the same margin everywhere. Because if I have 2 sections with title + text + image as picture and one has a longer text then the spacing between the text and the image is different between the sections.

Since it looks like it's based on this grid system I was unable to change that with CSS. Maybe by targeting a specific block ID but that would be a freaking ton of work to do it for dozens of blocks on several pages which would break if I need delete and recreate that block or something.

It looks like I'm hitting that 768px breakpoint which I saw online creates spacing issues between desktop size and mobile so maybe there is something there, I don't know.

I have the basic subscription. Thank you for your help

Screen Shot 2022-09-04 at 10.09.15 PM.png

Screen Shot 2022-09-04 at 10.09.35 PM.png

Screen Shot 2022-09-04 at 10.09.05 PM.png

Screen Shot 2022-09-04 at 10.09.28 PM.png


Edited by eddyg
Link to comment
  • Replies 2
  • Views 697
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

  • 3 months later...

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.