Website layout with a 1400px wide content - best practice?

Hey all,
what would be best practice to layout a site with a desired (max) base width of 1400px in webflow?
As the base desktop breakpoint is set to 992px.

Should I then start to design the page in the desktop breakpoint using an already altered design (for smaller screens) and then cascade upwards to get to the desired layout?
Or how would you go about this?

Here is a little snipped of the Xd design.

Thank you!

1 Like

The base breakpoint is always the starting point as it cascades down to the lower sizes and also up to the larger sizes. Take a look here at Webflow’s guide to breakpoints if you haven’t already to give you a visual of this in action.

Given you’re XD mockup is using a max width of 1400px, you’ll need to add the 1440px larger breakpoint (as well as the 1280px breakpoint if you need to adjust content between your base and largest size) and set the max width of your main container elements to 1400px.

ah yeah, thanks @mikeyevin!
So should I then use a lower max width of like 960px on the base breakpoint for the containers and set the max width to the corresponding size on larger breakpoints?
Or should I already use 1400px from base to 1440p and adjust the content to the scaled container?
What would be the smarter / prettier solution?

Could anyone please chime on how to go about this?
I saw a lot of people just using a 1400px container on the base breakpoint.
Even on Webflow site building tutorials.

Your setup will depend on how you want the site to respond for smaller breakpoints. The easy way is to set the width to 100% and the max-width to 1400px. This makes content bleed to the edge on smaller screens but limits the width of your site to 1400px for screens above 1400px.

2 Likes