Join the Webstudio community

Updated 7 months ago

Custom Breakpoints and BASE

At a glance
I updated the breakpoints and now Base is in the middle. How do I get that to the top (left when in the canvas) where it makes more sense?
Attachment
image.png
B
O
H
35 comments
Change your new breakpoints to use "Max Width" instead of "Min Width" in the Edit Breakpoints dialog
its correct, min-width are above
After adding some breakpoints, I seem to have some settings applying to smaller sizes. Is there a global way to clear out all settings in lower breakpoints?
you want to batch-assign styles to a different breakpoint?
but also I don't really understand what heppened
Let's say I have XL, L, SM breakpoints and I inadvertently make a bunch of changes to the L breakpoint, thinking I was on the XL breakpoint. Like changing box widths and adjusting font sizes.

I'd like to clear everything I did in L so that everything I do in XL flows down to it until I custize L properly.
Does that make sense?
yeah, you want to copy styles from one breakpoint into another
I think copy-pasting styles should solve that
  1. copy styles
  2. reset styles
  3. change breakpoint
  4. paste
But once copied, they're fixed to that breakpiont.
By default (in a new project) all styles in larger breakpoints flow to the smaller breakpoints until you change a style in the lower breakpoint. Then they each have separate styles. A font size in XL is the same font size in L unless and until I change the font size in L. Then any changes to font size in XL are only applied there and not in L. At least that's how I think it works.

If I copy styles from XL to L, they're no longer linked. If I change it in XL I have to make the same change in L, yes?
no copy styles and copy token would be 2 separate things
copy styles are breakpoint independent
at least that's how I think this will be implemented
Ahh, so the copy styles is a future feature?
same as paste styles
So for my current scenario, once I've made changes in the L breakpoint, I'm stuck updating those styles separately in XL and L?
yes or basically undo, then redo, so yes do always look at breakpoint you are on
keep amount of breakpoints at a minimum
I'd like to suggest clearing a breakpoint style as a new feature.
make most changes on base, only specific once on specific breakpoints
Yes, that's what I normally do. But two things happened. 1) I was on L and didn't know it. 2) I added some breakpoints and then copied an element from a different project that had smaller breakpoints and so in the new project, the smaller breakpoints had their own styles which requires me to update in multiple places.
this will be also fixed in the next days by offering an option to create a new breakpoint or to merge
Simple UX for clearing breakpoint styles might be to right click on the breakpoint in the tool bar for the option. Doing so, would cause all the styles from the next higher breakpoint to flow down to it.
(as if no changes had ever been made to the breakpoint that had styles cleared)
HAH! Sometimes I talk too much. Others not enough. Apologies.
Add a reply
Sign up and join the conversation on Discord