Just getting started with Squarespace CSS? Awesome! 😍 I want to teach you the basics – grab my free Getting Started Guide here 👉 https://insidethesquare.co/learn
—
🥳 Ready to launch ? Use the code PARTNER10 for 10% off (affiliate code): https://insidethesquare.co/partner10
—
In this tutorial, you’ll learn about media query codes and how you can use them to change the way your Squarespace site looks based on screen size.
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.
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}
—
🤩 Ready for more codes? The codes in this tutorial are just the beginning of all the cool things you can do with Custom CSS! When you’re ready to dive in and start customizing, you can use codes from my CSS Cheat Sheet. It has over 30 pages of code snippets and pro tips to help you get started. Download your copy 👉 https://InsideTheSquare.co/css
—
🥳 Ready to launch ? Use the code PARTNER10 for 10% off (affiliate code): https://insidethesquare.co/partner10 ❤️
—
🙋 Need some help? Visit https://insidethesquare.co/code-help to see my current support options.
—
The term “Squarespace” is a trademark of Squarespace, Inc. This content is not affiliated with Squarespace, Inc. I just really love their platform ♥
—
#squarespace #squarespacecss #howto #customizesquarespace #css #squarespacetricks #squarespacehacks #squarespacetips #squarespacemobile #mobilesquarespacesite #mobilesitesquarespace #mobilesquarespace
