SOLVED: Squarespace 7.1 Content Stack For Tablet (Or Any Breakpoint You Want) With CSS

Hi Squarespace Friends,

I spent hours combing through the forums for a solution on how to make website content stack on tablet like it does on mobile for Squarespace 7.1. Unfortunately, I never found anything that actually worked the way I wanted or needed it to. I realized that so many other people have this issue so I told myself I was going to be the one to solve it and I did. All you need is a little bit of CSS...

Please note, I'm not an expert in CSS and I didn't know how to make this occur for every page at once, so the code would need to be used repetitively for the different pages (#collections) you have.

Here is the code:

@media screen and (min-width:768px) and (max-width:1180px) {
  INSERT #COLLECTION-ID HERE .col {
  width: 100%;
  display: flex !important;
    flex-direction: column !important;
}
  .sqs-layout .sqs-block-spacer {
    display: none !important;
}
  .image-block {
    width: 60% !important;
    margin: auto;
  }
}

Explanation of the code:

1. The first part of the code is used to target what screen sizes you wish for your content to stack at or in between. You can see in my example that I am only targeting screen sizes 1px above the standard mobile breakpoint in 7.1 and up to a 1180px. If you wish to content stack at an even lager size then just increase the 1180px number in my code to a size of your own choosing. Please also be sure to update the code with your own collection id or else it will not work.
    
2. The second part is used to remove all spacers you may have used on your page. This is commonly done by default at the mobile breakpoint in 7.1. If you wish to keep your spacers then just remove this part of the code.
    
3. The final part is used to reduce the size of all images on the page. I found that without this part, most images are too large as you force the content stack. If you wish to keep all your images large then just remove this part of the code. Please note that "margin: auto;" will center you images like in my photo result. You can use left and right CSS commands to adjust this.

Here is the transformation:

In this example you will also notice I centered all the text. To do this just target the desired text class with a media query and match the "max-width" property to the value you used in the code above. Here is an example:

@media only screen and (max-width: 1180px) {
p { text-align: center; }
}

@media only screen and (max-width: 1180px) {
h1 { text-align: center; }
}

@media only screen and (max-width: 1180px) {
h2 { text-align: center; }
}

@media only screen and (max-width: 1180px) {
h3 { text-align: center; }
}

@media only screen and (max-width: 1180px) {
h4 { text-align: center; }
}

Hopefully this helps the community and works for everyone.

Thanks,
Branden