For years now, Webflow users have been asking for a native, 1200-pixel media query.
Many of these requests cite the growing concern of websites appearing “stretched out” on larger screens, while content in containers remains scrunched towards the center—extremely narrow on larger screens like the 27" iMac. Unfortunately, a larger breakpoint does not directly solve these problems.
Fortunately, Webflow already has a built-in solution for this!
In this video, we explore the problems associated with designing for larger displays, the reasons behind these problems, and some of the solutions you can implement immediately to make sure your projects are looking pixel-perfect on even the biggest screens.
Really nice video funny, fast and easy to understand! Would follow you on youtube if you do more of this.
I do the same as you described in this video, after a lot of trying and failing.
I now working on spacing between sections and how to make that effective, would love your view on that.
So when you have a lot of sections on a page/site, but I don’t want different classes on every sections, but need different padding and/or margin, I make a series of spacer divs. .xsmal (8px) .smal (16px) .medium (32px) and so on. And on mobile I often divide them by 2.
I have just started to try this and I think I like it, but I don’t know if its smart
This is a site I have tried this on: http://nettsidesentralen.no/
“wrapper”… old skool XHTML fix for centering taken to a new place, made into a new solution for Webflowers. Shows the true power and flexibility of both Webflow and CSS. Over the top production value on the video.
Wrappers are also a great element of design, adding a layer of depth and making the content stand out. I used the wrapper technique for one of my last sites http://lespecheurs.fr/ and I’ll be exploring more from now on.
Hey, @krubens—great comment. Creating divs as spacers can be a nice, quick fix. We’ve used them here and there. But when margin or padding can be used to create the same effect, we try and take that route.
An interesting alternative might be creating a series of combo classes for your sections so you can control the padding on a per-section basis, while not requiring blank divs be inserted inside each and every section.
Create your section element and style it
Create a combo class for each of your styles listed above (one with 8px padding, another with 16, another with 32, etc.)
You can use these new combo classes all over your project with the same effect…but now with fewer divs. As you said, you might not want different section styles on your site. In that case, the div spacer idea seems to do the trick!
Thanks, @Blaise_Posmyouck! Credit goes to /u/hmojo on reddit. Here’s the source. It’s Yosemite Valley from Yosemite National Park, and the shot is spectacular.
Wow, @vincent, this is wonderful! Loving the whole feel of the site, and the rounded corners give it such an elegance. Great work.