Squarespace Breakpoints.

squarespaceBreakpoints.less

/**
Squarespace essentially doesn't really document their breakpoints.
This can be quite annoying to not have when  doing custom CSS.

Most themes use essentially one breakpoint. Mobile and not mobile; anything 750 and below is considered mobile.

You can use these to write your own CSS and simply use the "Style Editor" to inject your compiled CSS in the event 
you are not using "Developer Mode" in your site.

Enjoy!
*/
@mobile:          ~"only screen and (max-width: 750px)";
@tablet:          ~"only screen and (min-width: 751px)";
@tablet-strict:   ~"only screen and (min-width: 751px) and (max-width: 949px)";
@tablet-desktop:  ~"only screen and (min-width: 751px)";
@desktop:         ~"only screen and (min-width: 950px)";
@desktop-strict:  ~"only screen and (min-width: 950px) and (max-width: 1199px)";
@desktop-xl:      ~"only screen and (min-width: 1200px)";

// Usage
@media @mobile {
  // Code here
}

@media @tablet-strict {
  // Code here
}

@media @desktop {
  // Code here
}

This just made my life so much better. Thank you!

how do I use this?

This just saved me so much time. Thank you!

Thanks for this Mike!

First of all: Thank you!

I have a question to a similar topic:

Is there any way to define the breakpoint of columns as well?

Example: Blog
A big screen (over 2500px width) shows 4 columns. It changes to 3 columns at 800px width. How would I program it to change to 3 columns at 1400px width?

Basically I want to have this at 1400px width – 5000px width:
.tweak-blog-list-style-grid [data-columns="4"] .BlogList-item {
width: calc( 25% - 15px );}

And this at 800px width – 1400px width:
.tweak-blog-list-style-grid [data-columns="3"] .BlogList-item {
width: calc( 33.33333333333333% - 14px );}

I would be super happy, if you could help me out with this one!
Thanks,
Jonas

Thank you for this... I am getting an error that says "Variable @desktop is undefined" (screenshot below). Basically, I am trying to change the breakpoint for desktops so that it jumps to mobile display for browsers that are too small to display my full navigation bar.

Thank you for this... I am getting an error that says "Variable @desktop is undefined" (screenshot below).

You probably didn't paste in the top section where the variable is defined.

Thank you