How do you create text blocks, with a colored background one under another?

Seems simple enough!

I am currently recreating this website In squarespace for a client. I am rather new to squarespace, this is my first project using it to recreate something. The client wants the squarespace remake to be as similar as possible to the website they already made. Everything's been going great, for the most part, only a few times I have had to mess with the custom CSS... Except when I tried to remake this page.

Specifically the colored text boxes arranged side by side, one on top of another. I made two columns and started putting in each text box. I found that changing the background color of each individual box is not possible without finding the block ID and changing it yourself in the custom CSS, so thats what I did.

In the old site each text box was separated by a white line, showing distinction. However squarespace merged the text so it was not possible for me to put a border around each textbox, nor was it possible for me to increase the spacing... It doesn't seem like this is going to be fixed either... thats ok.

So i moved to my next idea, though this is a roundabout way of doing things, I tried putting a spacer in between each little textbox, but adjusting the spacer so that it was much smaller that normal. I thought I had finally come to a viable solution! But... upon further investigation It seems that you cannot make the height of a spacer block any smaller once you get to a certain point.

So here I am, going through way to many hoops to do something so simple... believe me if I was making this site for my own purposes, i would have long since given up on this style, however, I am not. I am making something very specific for someone else's needs.

If I cannot find a solution to this I will either have to approach the client and tell them "sorry, squarespace just does not allow all of the designs you want." or I will have to move to another CMS. I really don't want to do either of these, so please someone help me out!

Thanks in advance.

So... No response. Are these types of things just impossible to do using squarespace?

If so; you definitely should have told me that before I ever started using it. You definitely should have told me the type of customer support I would be getting on this forum too. Very disappointing.

On 8/19/2019 at 6:53 AM, PMDesigner said:

So... No response. Are these types of things just impossible to do using squarespace?

If so; you definitely should have told me that before I ever started using it. You definitely should have told me the type of customer support I would be getting on this forum too. Very disappointing.

You can change spacers to allow you to set the height much narrower - down to zero in fact.

The code is:

/* 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;
}