Streaming live at 10am (PST)

Can I copy styles between breakpoints?

Hey there!
So what I did is for the last couple of hours, I worked on this project website, and I built everything on the 1920px breakpoint (that’s how I got the design files, that’s how I prefer working so I can see exactly how things look, big screen first, then mobile).
But then when I went down to other breakpoints, like 1440px/992px the styles weren’t there.

As far as I understood, you need to like design everything on the 992px so it is cascading UP, but that would be just dumb, like I have the design made for big screens, with a 1600px container, I would obviously prefer to make that big screen design first, get the font sizes & everything ready, and then go down the line and make everything smaller if needed.

Question is, any way I can copy everything I did for 1920px PLUS to the 992px breakpoint? Otherwise I would pretty much lose my hours of work and I’d just have to remake everything on the 992px one?

Thanks!


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hi @andreisavu, others can correct me if I’m wrong but I don’t think theres a way to copy all styles to the 1279px breakpoint without any manual labor. They were very clear on the introduction video that the breakpoint should be your starting point.

Anyway, just my 2 cents on your workflow. I think it shouldn’t matter if you designed on 1920 and develop on 1279px first and then move your way up. Usually, from sites that I have seen 1279px to larger screens have very similar layouts except for grids or cards which can be responsive with max-widths. At the end of the day 1279px is still a desktop resolution, so the experience and content shouldn’t differ from 1920+px;

Yeah I get what you’re saying but I still think that is dumb. There should be an option for this, or at least an option to make 1920px your ‘default’ starting point.

Like I get a project design that is made for big screens (1920px+), and with a styleguide attached:
-container 1600px
-H1 140px, H2 100px, etc., these are just random values.
isn’t it obvious that these values would only look good on the big screens? and I would prefer building that first in webflow and then calculating proportions for the smaller desktop sizes?

From a developer point of view, not being able to change how breakpoints work and how style is being applied between them, especially when all of them are desktop sizes, that means I’m pretty limited.
Like I can go in CSS and replace (media screen min-width:1920px) with min-width:1200px and kaboom, all good. Not having the same feature in webflow is dumb and it feels like a kid’s toy.

I guess I’m stuck with rebuilding everything on the ‘starting point’, awesome.

Well what you said make sense too. Unfortunately, it is what it is. :woman_shrugging:

It is what it is. I hope to never make this mistake again. Now I just have a lot of manual updating to do :expressionless:

Dang. I just did the exact same thing. I’m assuming you ended up manually changing everything?

1 Like

Yeah, it’s a wierd design choice, my best guess is that they started with desktop first approach (larger than laptop breakpoints came just recently, so that was the largest one). Since they updated the breakpoints it’s gotten wierd since it’s neither a mobile first nor desktop first approach.

It’s also not the best solution in terms of css rules overwrite since they should extend each other, so the starting point is best at any extreme ?!