brandon

Hey @alicroft.
This can be done. It requires a short bit of JavaScript to look for the "updated-at" div, query the page's JSON data, find the latest updated collection for the page (or series of pages in the index page), format the date to your liking, and then write the HTML to the "updated-at" div accordingly.
I'd guess it'd take a good dev. and hour or two to write and test an efficient and resilient script to do that (the first half hour to get the "gist" done, then maybe another hour to mess with time formatting, which takes a bit of time without using 3rd-party libs).
So yes, it's possible. Having taken a quick look, I think it could be done without you having to refactor your code at all. You could leave it as you have it on the pages you want it to appear, and the code could be set to run on those pages. If you want more info or help, say the word.

Hello. Add the following CSS via the CSS Editor:
@media only screen and (max-width: 768px) { #block-8fc91e9563250a77172c { display: none; } }
Do let me know if this works for you.
-Brandon

If this or any other answer helps you out, please give credit where credit is due: Accept the answer if you're the poster or Up-Vote the answer if you're not the poster. If it didn't help, feel free to inquire further or wait and see what others have to say. Code is provided without any warranty, expressed or implied.

Hi there.
Give this a try. Insert the following CSS using the CSS Editor.
/*Reorder category list items on Montauk*/ /*http://caniuse.com/flexbox*/ /*http://shouldiprefix.com/#flexbox*/ #collection-5719735837013bf7bb9fc122 .category-nav-links { display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, BB7 */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */ display: flex; /* NEW, Spec - Firefox, Chrome, Opera */ -webkit-justify-content: space-around; /* Safari 6.1+ */ justify-content: center; } /*Set the order of each list item ('li'), starting from the second child (first child is not displayed)*/ /*"All"*/ #collection-5719735837013bf7bb9fc122 .category-nav-links li:nth-child(2) { order: 1; } /*"General"*/ #collection-5719735837013bf7bb9fc122 .category-nav-links li:nth-child(3) { order: 6; } /*"Hair"*/ #collection-5719735837013bf7bb9fc122 .category-nav-links li:nth-child(4) { order: 2; } /*"Hair Care"*/ #collection-5719735837013bf7bb9fc122 .category-nav-links li:nth-child(5) { order: 4; } /*"Nail"*/ #collection-5719735837013bf7bb9fc122 .category-nav-links li:nth-child(6) { order: 5; } /*"Wig"*/ #collection-5719735837013bf7bb9fc122 .category-nav-links li:nth-child(7) { order: 3; } @media only screen and (max-width:640px) { #collection-5719735837013bf7bb9fc122 .category-nav-links { -webkit-flex-flow: column; flex-flow: column; } }
Keep in mind that if you add or remove categories, you'll have to change the "order:" values accordingly.
Do let me know if this works for you.
-Brandon

If this or any other answer helps you out, please give credit where credit is due and Accept and/or Up-Vote that answer. If it didn't help, feel free to inquire further or wait and see what others have to say. Code is provided without any warranty, expressed or implied.

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

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'  (bottom-right) and/or 'Upvote'  (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

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