Breakpoint basics and responsive design in Webflow — web design tutorial

In this lesson, you'll learn:
1. Styling your site across different breakpoints
2. Add larger breakpoints
3. Scale the canvas
4. Override styles across different breakpoints
5. Clear overriding styles
6. Test responsiveness and fluidity

Steps in the video:
00:00 - Introduction
00:43 - Style across breakpoints
05:38 - Add breakpoints
08:04 - Scale the canvas
11:39 - Override styles
12:44 - Clear styles
14:33 - Test responsiveness and fluidity
----------

[lipegon]

The quality of these video tutorials is insane. Kudos to all the Webflow team. I'm sure there is a lot of work beyond this presenter.

[intagengaming]

Saw a comment saying, “Add bigger breakpoints.” Now they’re here. Really awesome how they listen to the community

[Enginerosemusic]

How can someone be so smart and have such a good sense of humor at the same time this is rare guys

[trimonmusic]

Yes, finally! Thank you for adding this, been waiting for years - cheers guys! No more flimsy attempts at creating a layout that works for both 1024px and 2560px 😂

[digitalHayes]

Your educational content is as close to perfect as it gets.

[JoshGonsalves]

Hilarious and incredibly helpful as always!!! To me, THIS is the Webflow brand in a nutshell. So well done!

[LukeDorny]

Excellent. Excellent. And actually, this clears the way to selecting which breakpoint has the star on a per project basis, allowing for a mobile first design. This makes me happy!

[bonorbitz]

I love Webflow as product and a tool, but also for their excellent and clear (and funny!) tutorials.

[vm]

I like the people behind these videos.. they are never boring...

[CharlieAligaen]

I love these Tutorials! Very educational and hilarious at the same time! 😂👍

[jaywalker.]

"—and then we faded to black, just a bit too early." Got me.

[atkatsom]

This video is great even if you don't use Webflow and just want to understands responsive design. Awesome humour, full of useful information. Please make a tutorial about how to make tutorials once! :)

[marcusmoraru]

"Succulents. Are they still cool? I need to know." - now that's a site I can get behind

[helenaeastwood]

This is incredible. I love your style of explaining things.

[norbulama]

I am loving the tutorials! Love the learning process, the Narrator has made the learning curve As smooth as possible

[brandonthorpe]

this guy is hilarious and these are the best web dev videos I've ever seen.

[theoneandonly]

From the bottom of my heart, i love you.

[spencerchow]

Thank you Webflow. You've saved me tons of custom code editing

[alexmclean]

I was just this morning cursing Webflows lack of widescreen breakpoints. Thank you guys!!!!

[Nitro_Foundry]

This was so helpful! I had it sort of backwards. Love this guy btw!