Hello everyone,
It has been a few weeks now since I started learning to use webflow, and I finally feel like I have achieved a result that pleases me.
However, I am now facing a completely new problem: I would like to make it fluid and responsive for other devices, and I’m struggling with it.
I have watched videos about it, %, REM, VW, VH… but I’m afraid of damaging my site every time I try something new. I feel like I’m going in circles and ending up back where I started.
Therefore, I humbly ask for your assistance, please.
Thank you.
Read only website : Webflow - Synergy Asset Management
This video will explain the basics better than the community can in a post:
I’ve seen this video but what I’m not sure about is are designers designing everything at the 992px breakpoint and if done correctly will scale up OR are they adding every larger breakpoint and styling for each one?
It just seems extremely tedious to have to style for 6-7 different breakpoints. But maybe I’m missing something.
The other issue I have is the base breakpoint is 992px and when I design for it, it’s not the breakpoint that I will be previewing things at. I hit preview on my macbook air and it jumps into 1440px, so it looks not quite like what I designed.
Does that mean I should be styling at 1440px? Because I always hear/read to style at the base (992px) but that breakpoint doesnt seem to handle anything above it very well. I’m fairly comfortable with Webflow now but this breakpoint issue is confusing me.
Oh, I see. The video mentions this but I agree it’s a little confusing because we naturally think of cascade going in one direction. The base breakpoint is where the styles begin their cascade. Up and down. So if you make a type size change on your largest breakpoint, this will not carry downward to the base breakpoint.
I start my designs at base. I personally don’t use the larger breakpoints unless absolutely needed for some purpose. If you don’t want to design for the higher breaks, you can leave those settings alone altogether. If you want to remove the higher breakpoint, the fnsweet chrome extension allows you to do this. (Annoying this is not already a Webflow feature)
Designing for responsive breaks is tedious, but that control is the beauty of the platform too. 
When previewing the design, you should still have the option to switch to the base view using the breakpoint navigator up top.
