The Codebase

Filter through all the code

Find the Squarespace tutorial, plugin or snippet that’s going to help you fix or customize your client’s site in a heartbeat.

All CSS tricks, 7.1, Mobile design Beatriz Caraballo All CSS tricks, 7.1, Mobile design Beatriz Caraballo

Stacked masonry slides on mobile (7.1) - Gallery Section Grid Masonry

Loving the look of your 7.1 Masonry Gallery Section on desktop, but wish you could stack the slides on mobile? Well, it’s your lucky day! This snippet will help you tweak that aspect of your galleries in one quick copy/paste action. You’ll have the ability to decide at which breakpoint the stacking happens, and adjust the space between slides as well. Everything else will be taken care of automatically.

Read More
All CSS tricks, 7.1, Mobile design Beatriz Caraballo All CSS tricks, 7.1, Mobile design Beatriz Caraballo

Mobile nav on demand - Header nav (7.1)

Wishing you could bring up the burger button and mobile menu on tablets in your 7.1 site? Wish no more with this handy little snippet! Copy/paste this code into your Squarespace site and you’ll be able to have the mobile nav instantly show up at the breakpoint of your choice, to either avoid frustrating issues with excess nav links on tablet-ish devices or simply create a minimal look on desktop!

Read More
All CSS tricks, 7.1, Mobile design, Customization tips Beatriz Caraballo All CSS tricks, 7.1, Mobile design, Customization tips Beatriz Caraballo

Change the number of thumbnails per row on mobile for Portfolio pages set to Grid layout (Simple & Overlay) (7.1)

In this tutorial, I'll be showing you how you can easily control how many thumbnails/images/slides per row show up in your 7.1 Portfolio pages on mobile, when working with the Grid: Simple or Grid: Overlay layout

Read More
All CSS tricks, Mobile design, 7.0 Beatriz Caraballo All CSS tricks, Mobile design, 7.0 Beatriz Caraballo

Custom burger button for mobile (Brine 7.0) - Header nav

If you’re looking to go the extra mile with your site’s customization and be able to use your own custom burger button in Squarespace 7.0 (Brine family), this is the snippet for you! You’ll be able to replace the native lines in no time and showcase your branded version by simply using the image’s URL.

Read More
All CSS tricks, 7.0, 7.1, 7.1 CE, Mobile design Beatriz Caraballo All CSS tricks, 7.0, 7.1, 7.1 CE, Mobile design Beatriz Caraballo

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.

Read More
Mobile design, All CSS tricks, Customization tips, 7.0, 7.1, 7.1 CE Beatriz Caraballo Mobile design, All CSS tricks, Customization tips, 7.0, 7.1, 7.1 CE Beatriz Caraballo

How to adjust your page/index section height on mobile (7.0 & 7.1 CE)

If you like creating really immersive designs for your clients, chances are you love setting your index sections (7.0) or page sections (7.1) to the full height of your screen. The effect looks amazing on desktop but, on smaller screens, that extra space can be a little bit too much…

Read More

How to align footer text to the center in mobile screens (Brine 7.0)

Have you ever wanted to center-align text inside your footer in smaller screens while keeping it left or right-aligned in tablets and desktop? The process and code are quite simple BUT, particularly when you originally have text aligned to the right there are additional steps required to have full control over the mobile result.

Read More
Mobile design, All CSS tricks, Customization tips, 7.0, 7.1, 7.1 CE, 7.1 FE Beatriz Caraballo Mobile design, All CSS tricks, Customization tips, 7.0, 7.1, 7.1 CE, 7.1 FE Beatriz Caraballo

Controlling gallery block grid images per row in mobile (7.0, 7.1 CE & 7.1 FE)

I want to walk you through a nifty little CSS trick that you can use to rearrange your gallery block grid images in smaller devices, so you can choose how many thumbnails or slides to display per row!

Read More

How to remove automatic hyphens in Squarespace (7.0 & 7.1)

When I talked about changing the size of mobile fonts in Squarespace at the very end of the post I gave you a quick tip on how to turn off automatic hyphenation. However, I wanted to do a separate post about it since there are some things you should…

Read More

Change the size of mobile fonts in Squarespace (7.0, 7.1 CE & 7.1 FE)

Not feeling happy with how Squarespace is resizing your fonts in mobile? Then let's do something about it shall we? In today's quick tutorial I'm going to show you how you can easily change the size of your fonts in mobile view. Let's go!

Read More