Squarespace CSS tricks
The Blog
Explore the Squarespace tutorials and tips available on the site to tackle that customization or fix you’re after!
And if you can’t find what you’re looking for:
Create a typewriter effect for headings in Squarespace (7.0, 7.1 CE & 7.1 FE)
In today’s tutorial, we’ll be tackling how to create a typewriting effect for headings in Squarespace, in just a few minutes!
How to style the related video items section title in Squarespace 7.1
Are you working with Video Pages on your client's site? If so, today's tutorial may come in handy if you're wanting to style the inner related video items area. In this video, I'll be showing you one clean and simple way to customize it with a bit of CSS.
Looping rotating words effect for headings in Squarespace (7.0, 7.1 CE & 7.1 FE)
Want to create a looping rotating effect for a heading on your client project? Then take a look at how you can easily achieve that with an awesome plugin!
How to create responsive text, WITHOUT media queries, in Squarespace (7.0 & 7.1)
In today's video, we'll be tackling how to handle responsive text in Squarespace with ONE line of code and no media queries. Take a look!
Creating cool text effects in Squarespace with CSS (7.0 & 7.1)
This is a fun one! Today we’ll be looking at how we can create 3 awesome text effects in Squarespace, with just a little bit of CSS.
Adding a fun twist to poster blocks (7.0 & 7.1)
Recently, I was testing a couple of customizations in 7.1 and ended up with a pretty cool one that I’d like to share with you today!
Why your Google Font isn't showing up on your Squarespace site on mobile
Today we’re taking a closer look at the reasons why your Google Font may not be showing up on your Squarespace site on mobile, and what you can do to fix it!
Turning a header into outline text in Squarespace
Today’s tutorial is a fun little trick inspired by a question asked by a member inside the Club. We’ll be looking at how you can turn any heading on your client’s site into outline text! This will be a quick one, so let’s dive right into it!
Adding an image behind a heading in Squarespace
For today’s CSS trick, we’ll go through how you can add an image as a background to headings on your site, so you can create a more custom design without having to sacrifice the benefits of using real text!
Changing the color of your heading, menu items and site title, only on one page in Brine
In today’s post, we’ll be looking at what you can do when your menu navigation is readable over certain banners but not over others, without having to add a background color to it or changing the images altogether.
How to align footer text to the center in mobile screens
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.
How to add a custom font to your navigation menu items
You may already be using a custom font for headings across your client’s site. But, you’re not sure how to add it to your nav items for both your regular navigation AND your mobile menu. Let’s see how that can be done, shall we?
How to create a multi-column text block in Squarespace, without using separate blocks
This depends on the font you’re using and the styles you’ve set for it, but most often than not, you feel you need just a bit more space between both columns. The problem is if you shove a spacer in there, the gap looks more like an airport runway than anything else.
Add a gradient in Squarespace to only one word in your heading
Let’s give a gradient to a single word in your heading! The method is pretty simple, however we have to tackle some compatibility issues to make sure the word is readable in as many browsers as possible. So, why don’t we get started?
Turning the Gallery Block title into a colorful label
If you’re using a Gallery Block as category thumbnails for your blog, to redirect to your different service packages, or anything else that works best with an identifying label, you’re gonna love today’s customization! We’ll be turning the Gallery Block slide titles…
Creating vertical text in Squarespace
Oh I know you wanna jump in the vertical text wagon. In fact, you probably already did! Right now you may be using images to contain your vertical text because let’s face it… it’s way easier than figuring out how to it with code.
How to create a low highlight behind your text
Wondering how to create that cool low highlight that you see behind headings and links all around the interwebs? Then keep reading 'cause I'm gonna show you how to nail it! We're going to be adding the highlight background to one word in a heading…
How to remove automatic hyphens in Squarespace
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…
Change the size of mobile fonts in Squarespace (7.0, 7.1CE & 7.1FE)
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!
How to overlap headings in Squarespace
I'm a big fan of overlapping text on purpose to create cool-looking headers, I feel this gives a more interesting look to a rather "standard" section of your website without overthinking it. So, if you love mixing fonts and want to add a unique touch to…