Mobile Breakpoint Explained

You already know that one of Squarespace’s strengths, and one of its many benefits, is that it takes your design and makes it mobile responsive for you. You don’t have to worry about creating three separate websites - one for desktop, tablet, and mobile - and you don’t have to spend a lot of time in Site Styles tweaking the mobile appearance of your site. How awesome.

Yet, from time-to-time things can go wonky on tablet (mostly tablet) and even on mobile. Often, when they do, its because something called the mobile breakpoint needs to be adjusted.

What Is The Mobile Breakpoint?

Templates in the Brine Family allow you to edit the Mobile Breakpoint in Site Styles.

Templates in the Brine Family allow you to edit the Mobile Breakpoint in Site Styles.

The mobile breakpoint is the screen width measurement at which Squarespace scales your content from desktop view to mobile. Templates in the Brine Family allow you to edit the mobile breakpoint. You can increase or decrease the breakpoint from its default value. This can have all kinds of benefits, such as enabling mobile navigation on desktop, or enabling mobile navigation on tablet.

Editing The Mobile Breakpoint In Site Styles

If your website is built on a template in the Brine Family, you can easily edit the Mobile Breakpoint in Site Styles.

To do so:

  1. Open Site Styles (from the Design panel)

  2. Type “mobile breakpoint” in the search field

  3. Increase or decrease the breakpoint value based on your design intentions. Increase the value to force content to scale to mobile at a larger size and decrease it to keep content in desktop view until it’s displayed on a small device. Note that the default value is based on the typical size of a mobile screen in today’s market.

Mobile Breakpoint In Other Template Families

It’s possible to edit the mobile breakpoint with custom CSS in other templates. In other templates the breakpoint may be set to a higher value to accommodate the overall design of the template.

@media only screen and (max-width:1024px){ .col {float:none ! !important ;width:100% !important;} }  

By editing the max-width value in the code above, you can change the mobile breakpoint in a template outside of the Brine family.

Two things to remember:

  • By increasing the value you’ll force content to appear in a mobile-friendly presentation on larger screens and browser windows.

  • The default value is usually 640px.

When To Edit The Mobile Breakpoint

The most common reason to edit the mobile breakpoint is to influence the appearance of a website in tablet view. Tablets are a kind of technological purgatory being mobile devices that now exist at desktop sizes. Depending on the user’s device your site might appear formatted for a smartphone or for a desktop computer. To control the outcome, you might increase the mobile breakpoint. Just be sure to test across devices and pages to make sure that when you do so, you’re not compromising style or functionality anywhere on your website.