Join the Webstudio community

Updated last year

Breakpoint ordering

At a glance

The community member who posted the original post is looking for a way to automatically arrange or sort the breakpoints they have added, as the new ones are currently added to the top. They know they can delete all the breakpoints and start over, but they are looking for a shortcut.

The comments discuss the ordering of the breakpoints, with some community members noting that the breakpoints are sorted in a particular way above the canvas, with min-width breakpoints on the left and max-width breakpoints on the right. They also mention that using a mixture of min and max tokens can affect the sorting order, and that it's important to understand the difference between min and max breakpoints.

There is no explicitly marked answer in the comments, but the community members provide helpful information and suggestions to the original poster.

If you edit the breakpoints and add new ones, it sorts the new to the top. It would be nice if they were either auto-arranged by size or we could sort them.

I know I can delete them all and start again; just looking for a shortcut.
Attachments
Screenshot_2024-02-07_at_2.58.14_PM.png
Screenshot_2024-02-07_at_2.56.23_PM.png
J
O
16 comments
Breakpoint ordering
A secondary question to this... I've created multiple breakpoints and have never noticed the "Star/base" move to any other position than the left. I prefer developing on a larger screen. Like this, am I supposed to create tokens on this base breakpoint? My screen real estate is small this way.
Attachment
Screenshot_2024-02-07_at_3.11.09_PM.png
Attachment
Screenshot_2024-02-07_at_3.14.23_PM.png
isn't the automatic ordering the same as you see above canvas?
above canvas on the left you see min-width breakpoints, on the right max- width breakpoints and they are all sorted in a very particular way
This is what I meant for the first part.
Attachment
Screenshot_2024-02-07_at_3.15.25_PM.png
yes they are sorted specifically to be the same sorting as above canvas
you have a mixture of min and max tokens
if you use only one type they will be all in one sort order
Ugh... how did I not notice that? Oops.
did you notice the difference between min and max?
haha no, I didn't.
thats extremely important
see the tooltips on each breakpoint above canvas
Agreed. Thanks. I'm familiar with them, just didn't realize they were different selections.
Add a reply
Sign up and join the conversation on Discord