Streaming live at 10am (PST)

[Video] Thoughts on Larger Breakpoints in Webflow 😎


#1

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.


Interactions IX 2.0 video tutorials - very good / funny / very well done
[Spanish] Problema con imagenes en 1200px “Large Screen” media query
Change the grid in designer view
#2

Awesome video.... Well done!! You are a natural.


#3

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/


#4

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


#5

Very informative video, thanks for sharing.


#6

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


#7

Great video @McGuire !


#8

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


#9

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.


#10

LOL!!! LOVE IT!

Thanks for the Monday morning giggles


#11

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.


#12

Excellent video McGuire! Great delivery too.


#13

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.


#14

Nice video @McGuire

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


#15

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


#16

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.


#17

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:


#18

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!


#19

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


#20

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