Stacking Summary Block Items on a Mobile

---

Summary Blocks provide a great way to embed and display the content from blogs and other collections on any page in Squarespace.

Whilst the summary block display on Desktop looks great. The mobile version is sometimes not ideal because it only displays two tiles are across the screen by default.

Copy and paste the below code into the Custom CSS

/* MOBILE STACK*/

@media screen and (max-width: 640px) {
.summary-item-list {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.summary-item {
width: 100%!important;
margin-bottom: 50px;
}
.summary-item:nth-child(n+5) {
display: none;
}
.summary-carousel-pager {
display: none!important;
}
}
}}

For those who are new to this. You can add custom CSS to Squarespace to tweak the layout and add extra functionality. No coding experience needed , just copy and paste into the Custom CSS area which lives under the Design tab.