How to customize the mobile version of Squarespace
This tutorial is for both versions of Squarespace, 7.1 and older versions built with 7. For more information, visit https://insidethesquare.co/themes
If you want a browser to apply a custom code to a specific device size, media queries are how you make that magic happen!
They let a browser know to only apply a code when a screen is a specific pixel width.
Before you start plugging away with the codes below, here is some important info you should know.
Squarespace is a responsive website builder.
This means it will automatically change the look, size, and layout of your website content based on screen size. Using the media queries below, you can overwrite some of these responsive changes, but be careful that you aren’t reinventing the wheel! Some of their responsive style changes are there to help with accessibility standards and to make it easier for people to navigate the content of your site. Just because you can change it doesn’t mean you should. 😉
Devices are always changing.
The current size iPhone is a totally different screen size and resolution than it was 5 years ago, and 5 years from now, it’s probably going to be different again! This is why responsive site builders like Squarespace are great - your site will change based on breakpoints so you don’t have to keep track of every single phone width out there. That also means that you should try to keep your queries to a minimum, and focus on the common breakpoints below, so your site displays similarly across common devices.
Always. Close. Your. Query. ALWAYS.
A media query is kinda like a box that you holds all the codes for that screen size. If you don’t close the box, and you add more code to your site, you will end up with a hot mess pretty quickly. Make sure you always add the closing curly bracket } when you are done with all the code changes for that device size.
Ready to code some mobile magic?
Here is a free video explaining how these codes work along with a few examples of how to use them. When you’re ready to create your own mobile codes, use the example breakpoints below.
SUGGESTED BREAKPOINTS FOR SQUARESPACE
These are the codes I use in my own Squarespace site creations and are just a suggestion. Change up any of the PX values below to create your own breakpoint.
MOBILE ONLY
@media screen only and (max-width: 640px) {code goes here}
TABLET ONLY
@media screen only and (min-width: 641px) and (max-width:950px) {code goes here}
DESKTOP ONLY
@media screen only and (min-width: 951px) {code goes here}
