Creating Mobile Codes in Squarespace
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, watch this mobile code tutorial to learn more about how media queries work in Squarespace.
Brand new to custom code?
A few more pointers before you get started…
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 only screen and (max-width: 640px) {code goes here}
TABLET ONLY
@media only screen and (min-width: 641px) and (max-width:950px) {code goes here}
DESKTOP ONLY
@media only screen and (min-width: 951px) {code goes here}
Check out some of the latest mobile-specific tutorial videos below!
In this tutorial, you'll learn how to swap out the default mobile menu icon for your very own custom image.
In this tutorial you’ll learn how to customize the look of a light box contact form on your Squarespace website. We’ll be using custom CSS to change the overlay color, add a border, and update the style of the form title.
In this tutorial, you’ll learn how to use custom code to add a background image to contact forms on your Squarespace website.
In this tutorial, you’ll learn how to use custom code to remove the automatic outline for active form fields and customize it to match your own unique style.
In this tutorial, you’ll learn how to use custom code to create a sliding page animation for your Squarespace website.
In this tutorial, you’ll learn how to use custom code to show an alternative version of your logo when your mobile menu is open.
In this tutorial, you’ll learn how to use CSS to stack blog pagination on mobile screens for a Squarespace website.
In this tutorial, you’ll learn how to use CSS to change the size of gallery sections on smaller screens.
In this tutorial, you’ll learn five creative ways to customize your Squarespace mobile menu.
In this tutorial, you’ll learn how to use some super simple code to make sure your Squarespace project titles are visible on smaller screens.
In this tutorial, you’ll learn how to use CSS to change the layout of your Squarespace site, moving the header to the bottom of the page when your site is viewed on mobile devices.
In this Squarespace tutorial, you’ll learn how to customize the font used for the mobile info bar labels in Squarespace.
In this Squarespace tutorial, you’ll learn how to customize the color of the Squarespace mobile info bar.
In this Squarespace tutorial, you’ll learn how to set up your mobile info bar. I’ll teach you how to update your business info, enable it, and explore how it works.
The CTA button in your Squarespace website can be a link to a phone number, but no one needs that on desktop! This tutorial will teach you how to create that link for mobile only.
This tutorial will teach you how to use CSS to make sure the header of your site is always visible on mobile devices.
Learn how to create two column of content for collection pages in Squarespace - products, videos, and blogs!
This is one of the simplest ways to create a mobile layout in Squarespace! In this tutorial, you’ll see how two lines of code can create a super customized look specifically for mobile.
You can replace your mobile menu icon with custom text in Squarespace and this tutorial will teach you how, step by super simple step!
In this tutorial we’ll make the mobile menu of your Squarespace site visible on desktop, and use a little code to customize it even further.
In this Squarespace tutorial, you'll learn how to use your own image for the background of the header menu (aka main navigation) of your Squarespace website.
In this tutorial, you’ll learn how to assign a new font family to every link in the menu, including your site title and header button, and you’ll learn how to isolate just the links or just the button if that is all you want to change.
In this tutorial you’ll learn how to use custom code to target the bold and italic font styles in your list section header so you can combine multiple font styles on one line!
In this tutorial, we’ll use custom CSS to change the look of your product pages specifically on mobile devices in Squarespace 7.1
In this tutorial you’ll learn how to use custom CSS to change the look of the quantity and variant options on a product page in Squarespace 7.1
In this tutorial, you'll learn how to use custom CSS to change the size of an image specifically on mobile devices.
In this tutorial I am going to show you how to use some custom CSS to center all the text in your Squarespace footer specifically on mobile devices. This tutorial covers both version 7.1 an older sites built with the Brine theme in version 7.
In this tutorial I am going to show you how to use some custom CSS to create equal width buttons in your Squarespace site, and how to apply this code to just the mobile version too!
In this tutorial, you'll learn how to add a second button to your Squarespace website.