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.
Good explanation and tutorial. The only thing I currently do differently is instead of adding the padding to the custom container, is to add the padding left/right to the section instead.
This is another good option. Another idea seen on this thread revolves around using padding on the body so the wrapper has some breathing room, as seen in @vincentâs http://lespecheurs.fr/ site.
Hi, nice video! Iâm trying your suggestion, but if I resize the window does not recognize the different formats (tablet, phone) for the columns, it still shows them in a straight lineâŠ