The
Snippet Directory
A curated collection of versatile snippets for Squarespace designers, aimed to help customize client projects in a fraction of the time.
Keeping horizontal layout on mobile (7.0 & 7.1 CE) - Image Block Card
Depending on how you’re using Card Image Blocks, you may be looking into how to keep the content and the image in a horizontal layout at all times. If that’s the case, this code snippet is for you! With a quick copy/paste you’ll be able to maintain everything side-by-side even on smaller devices, and control the width each part should have.
Custom font for title (7.0 & 7.1 CE) - Image Block Card
Make the title of your Card Image Blocks fully custom with this short snippet. Set its font family and add in any other font styles you like, by including or removing CSS properties from the code!
Custom font for subtitle text (7.0 & 7.1 CE) - Image Block Card
Make the subtitle text of your Card Image Blocks fully custom with this short snippet. Set its font family and add in any other font styles you like, by including or removing CSS properties from the code!
Same height for image and content (7.0 & 7.1 CE) - Image Block Card
If you’re working with a Card Image Block and want to have the satisfying feeling of evenness when looking at it, then this snippet is for you. Copy/paste this code and you’ll automatically get the image and content side of your cards matching in height across the site!
Alternative image on hover (7.0 & 7.1 CE) - Image Block Card
Set up an alternative image on hover mode for Card Image Blocks with this copy/paste code. The snippet will allow you to set any image you want just with its URL, and it’ll take care of the rest of the animation for you.