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?
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.
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 ?!
Dang. Just did this as well. My feature request would be the ability to copy something from a smaller version and “paste special” on a larger one that would “paste with Class overwrite”
“Copy styles to Breakpoint” is a fundamental workflow in several other programs for responsive design.
So to clarify, we need a workflow where a design is optimized for mobile first (as many components need to be), then can be pushed UP to another breakpoint. A typical scenario is a complex form optimized for mobile/ phone - that can be most easily expanded for Tablet. There is just no good way to design some things for the larger screen first.
No matter what, you should always be working in the main desktop view for styles to cascade up. From that window you can set a width value equal to that you want to work into :
As for your specific question, I don’t think it’s possible to copy style because of how webflow works… Leasson learned the hardway for me too some time ago !
This needs to be a feature. There’s too many things in this software you find out later are a roadblock that wouldn’t have been the case if you were just coding.
Same scenario. I started working in the size the design was handed to me. It makes sense to get the proportions right first before moving to other breaking points.
