Designing from such a specific reference may be part of the issue here as the web is more “fluid” when it comes to sizing—not to mention that Webflow’s breakpoint system takes a certain amount of familiarity to design around specific larger breakpoint sizes. Unfortunately after you create the larger breakpoints there’s no way to remove them, so typically I save these sizes for the very end of a project (if they end up being necessary at all).
I started on the main BP 992( in designer) but when I preview it shows up as 1260px on my main bp, and this implementation looks totally different on that size difference.
Depending on your monitor size, this process could be a bit different, but unless you’re using a larger monitor, you’ll probably need to utilize the canvas scale functionality to get an idea of how the design looks on a bigger screen. In my case I’m working on a 13" MacBook Pro and when I Preview a design on the base breakpoint—without any larger sizes activated—I actually see the site with a width of 1420px. When I use my external monitor, that size increases to 1900px but I can easily shrink the preview window size (while still in the base breakpoint) to see what it would look like at 1440px.
I hop this is not too confusing, one more thing is that i want everything in my website to be proportionate on every BP and to look virtually the same.
There are a lot of techniques you can use to scale the site proportionally through your breakpoints, but each of these involve using dynamic units (%, EM, REM, VW) for your sizing with some min/max widths in there to make sure things don’t get too wide or too small. Given you’re already in the middle of the project, your options are a bit more limited but still follow the same general idea.
Im mid way into the project and would like tips and advice regarding these BP nuances. For example should I design on 1135 px which is the average between 992 and 1279 or should i just design at 1279 because it handles design on 992 and below?
You’ll always want to “design” at the base breakpoint—regardless of your reference—as this is how Webflow is meant to be used. Even if you design things at 1135px wide, the changes will persist between the 992px and 1279px sizes—making changes at that specific size doesn’t actually create a separate media query. This is why creating larger breakpoints too early can cause extra work as any style changes you’ve made will override changes you make to the base breakpoint.
One suggestion is to move the styles from your larger breakpoints to your base breakpoint and then clear those styles from the larger sizes. This will causing all base breakpoint changes to cascade all the way up to the largest size without changes (even though you’ve added additional breakpoints on your project) but this can be a lengthy process if you’ve added a bunch of styles to these larger sizes. My suggestion would be to design the site at base size, even though it will only go up to 1279px wide, and then move up to your 1280px size and tweak/remove styles to allow it to naturally scale up and fill the space. As long as you’re not using fixed sizing for your elements the design should respond fairly well as the screen gets larger without too many style overrides.
Hopefully that clarifies things a bit but feel free to reach out with screenshots if you run into any specific issues and I’ll do my best to walk through potential solutions 