brandon

Another option may be to float the images instead of making distinct columns for them. I believe that then the images will always be first in the document flow even when floated to the right. This would of course cause the text to flow around the image, rather than staying within its own column which may or may not be desirable to you.

Keep in mind that this code is very specifically written for your current row/column/block arrangement. If you rearrange things, this code would have to be refactored. But this at least shows it's possible (and not that difficult) to do, and gives you a pattern to follow if you need to modify it in the future.

Reference: http://stackoverflow.com/questions/220273/

Hi there. Give this a try.

@media only screen and (max-width: 640px) {
   #page-56fd63b662cd94b482c67b26 .row .row:nth-child(even) {
       display: table;
   }
   #page-56fd63b662cd94b482c67b26 .row .row:nth-child(even) .col:first-child {
       display: table-footer-group;
   }
}

Using Flexbox may be the more standard way to reflow the visual presentation of the document, but using it here causes additional complications, and doesn't have as broad compatibility as display:table.

Let me know how it works for ya.

-Brandon

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

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

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

Yes, here is a suggestion.

First, check your style editor and be sure that there is not simply an option there to disable the 'fixed' header.

If you don't see an option in your style editor, you can use the following CSS inserted into the CSS Editor:

.header-announcement-wrapper {
   position: static;
}

#page {
   margin-top: 0 !important;
}

Remember, the CSS Editor and the Style Editor are different editors. The style editor is where you have simple options to change the template. The CSS editor allows you to insert code.

-Brandon