â–Ľ
Streaming live at 10am (PST)

Main BreakPoint Question

HI my question is in regards to the main breakpoint
it appears in my designer that the main BP is 992px wide and then i have another BP added at 1280,1440, and 1920.

im currently designing plus setting sizes and resolutions corresponded to 1440 as thats the canvas in which my designer sent me the design. So i managed to find out how to proportionaltey add elements on each screen basing and referencing from the design at 1440px. My question is from 992px to 1279 px there is 287 px and that distance is making look horrible when im trying to make it look fluid. it looks nice on 992 but horrible on 1279 even though its well designed on 1280. Should I then set the values and sizes on the main desktop as if it were to be 1279? because when i preview it ends up showing on that size.

Welcome to the community @hclark9526!

I’m having trouble following the issue you’re experiencing and from what I can see everything to look fine on the larger breakpoints (main up to the 1920px). If I get some more specific information about what isn’t working as you’d expect I may be able to help out.

That said, you should always design your site on the main breakpoint and adjust only when the design breaks or could be adjusted to display better on either the smaller or larger breakpoints. Unlike traditional web design techniques, Webflow’s breakpoint cascade away from the base breakpoint (both up and down) so the process is a bit different than you may be used to.

I wrote a pretty lengthy post that goes over this process that you may want to check out below (which includes a link to the Webflow University tutorial on the subject as well):

One of the more common issues I see folks make is immediately creating the three new larger breakpoints even when they don’t intend to make many changes on larger screens. Depending on the design, a 1440px mockup could definitely be the same layout/styles as you’d use on your base breakpoint—meaning you wouldn’t need to even worry about managing that layout separate from the base breakpoint.

1 Like

@mikeyevin
hey yes hi Ive been reading your posts all day trying to wrap my head around this issue im having. Heres my attempt in explaining the problem correctly,
My designer sent me a design with specific specifications as to sizes of elements (pictures, headings, etc) so Im particularly thinking of how to go about the implementation, 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. My case is that from 992px and 1279px the designs change between this range, so how do I design on my main BP so that when i preview it shows the same pixel length it sais I am designing on. 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. 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?
Thanks and I really appreciate your help.

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 :+1:

1 Like

@mikeyevin
Okay That actually helped me a lot in terms of understanding.
So basically i must design on the base BP and make sure that the 992-1279px distance is looking fair when implementing. Thanks I appreciate it if theres anything else you’d like to add feel free.