Mobile Breakpoint in Squarespace 7.1

Short answer: it’s 768px.


Long answer:

In Squarespace 7.1, you can’t change the mobile breakpoint the way you can in 7.0. That also makes it harder to find the mobile breakpoint if you’re trying to use it in a media query for custom CSS purposes.

I wanted to post the mobile breakpoint in a clear and obvious place in case someone tries to Google it (and for myself for future reference!), because I wasn’t able to find it through a quick internet search and had to do my own experimentation to discover it.

The mobile breakpoint for Squarespace 7.1 is 768px, as far as I can tell.

So if you’re trying to style something on mobile only, you’d use this media query in Custom CSS:

@media screen and (max-width:767px) { your css }

and if you’re trying to style something on desktop only, you’d use this media query:

@media screen and (min-width:768px) {
your css
}

Hope this was a quick and easy answer for someone!

Previous
Previous

Creating a Dual Language Website in Squarespace

Next
Next

Embed a Youtube Channel or Playlist in Squarespace