Changing the mobile breakpoint on Squarespace

When it comes to controlling the responsiveness of your website it can be difficult to make the desktop, ipad/tablet, and mobile to all look good in squarespace. One way I’ve been able to remedy this is to change the mobile breakpoint so that the ipad and mobile will look the same. It can also be cool to change the breakpoint all the way up to desktop in order to get the ‘mobile’ style menu. It’s super simple but can make a huge difference in the design and functionality of your site!

In order to edit the mobile breakpoint you will need to go into the style panel under the design tab. You can either scroll down to the mobile section or type “mobile breakpoint” in the search bar. It should immediately pop up! Under the mobile breakpoint there is a slider that you can shift up and down. However, the slider only goes up to 1280 pixels and will only go down to 240 pixels. This would be the typical zone you would stay in to just edit the mobile and ipad views of your site. So if you’re looking to simply make the ipad / tablet view the same as the mobile then drag the slider up to 1280 and this will only shift the ipad view. But, if you want it to also change the desktop view, you will need to manually type it in. For desktop I usually will go as high as 3000 pixels in order to cover all the wide varieties of screen sizes from laptops to desktops. Once you type that in, go ahead and save it and exit the style panel.

The first thing you’ll notice after is that the mobile menu is now on the desktop which is exactly what we want! And that’s it! It is a really simple way to switch up your site or have more control over the responsiveness!