Squarespace Tip: How to apply mobile only styles to your website

Here’s a quick guide on how to apply mobile only and table only styles to your website, assuming you already know basic CSS.

If you are using a template in the Brine family (the best templates!) you have a ‘Mobile Breakpoint’ option in the site styles. This is the width at which the screen switches from the desktop version to the mobile version. By default, this is set at 640px, but I like to change it to 1024px so it includes most tablets. In this guide I’ll be using 1024px as the max-width for tablets. I’ll be using 420px as the max-width for phones since most phones (for now) are smaller than 420px wide. You can play around with the numbers and see what works best for your site.

For phones only:

@media screen and (max-width: 420px){
//CSS code goes here
}

For phones & tablets:

@media screen and (min-width:420px) and (max-width: 1024px){
//CSS code goes here
}

For tablets only:

@media screen and (max-width: 1024px){
//CSS code goes here
}