[Video] Thoughts on Larger Breakpoints in Webflow 😎

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. :confused:

Fortunately, Webflow already has a built-in solution for this! :sunglasses:

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.

43 Likes

Awesome video
 Well done!! You are a natural.

2 Likes

Really nice video :slight_smile: 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 :stuck_out_tongue:
This is a site I have tried this on: http://nettsidesentralen.no/

1 Like

Very inspirational and also funny to watch. Thanks for sharing your thoughts. Awesome video.

1 Like

Very informative video, thanks for sharing.

1 Like

Max-width power :slight_smile:

Thank you very much for this video, @McGuire, so interesting !

Also, I very much like your computer background pattern :slight_smile:

Take care

1 Like

Great video @McGuire !

1 Like

Brilliant video @McGuire! Definately learned a thing and two there :slight_smile:

1 Like

Great video!

“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.

Well done.
~B.

1 Like

LOL!!! LOVE IT!

Thanks for the Monday morning giggles

4 Likes

Great video! Love the content and the edit :slight_smile:

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.

4 Likes

Excellent video McGuire! Great delivery too.

1 Like

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

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.

  1. Create your section element and style it
  2. 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. :sunglasses: 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! :heart_eyes: Loving the whole feel of the site, and the rounded corners give it such an elegance. Great work.

1 Like

Nice video @McGuire

I do the larger-container wrapper trick with a lot of designs. Example; www.toplace.com

1 Like

@vincent This “Les pĂȘcheurs” website rocks ! It’s just beautiful and so well done.
@rowan Same for you, as usual
Loving the toplace.com site.

Thank you for this, guys, so inspiring :slight_smile:

Take care.

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.

1 Like

Excellent design, @rowan, crisp and beautiful. :slight_smile:

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

1 Like

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


https://preview.webflow.com/preview/ecowekk?preview=e3f3553fcd20ab7c073a1a72133fa901

Thanks!

@gomezcabrera you used flexbox for the row wrapper so you just need to change the flex layout from horizontal to vertical on mobile.

2 Likes

Thanks again AAron! Te voy a tener que pagar comisiĂłn haha

1 Like