Force An Image Card to Stack on Tablet in Squarespace

In this Squarespace tutorial I show you how to force an image card to stack at any screen width you want using only 10 lines of CSS.

If you hate how the image card block looks on smaller screen sizes, particularly tablet, then this is your answer!

Making Image Cards Stack on Any Screen Size

Custom CSS:

@media screen and (max-width: 800px) {
.sqs-block-image .design-layout-card:not(.sqs-narrow-width) {
    display: block!important;
}
.sqs-block-image .design-layout-card:not(.sqs-narrow-width) .image-card-wrapper {
    width: 100%;
}
.sqs-block-image .design-layout-card:not(.sqs-narrow-width)>div:first-child {
    width: 100%;
}
}

If you have any questions or need help implementing this on your site, please feel free to shoot me an email or leave me a comment on YouTube.

Cheers!
Chris