Making Responsive Websites in Framer

Follow Danny on Twitter: @Dannysapio

If you're building a website inside of Framer, It is so important that your website is responsive across different devices. That's why in this video I'm going to be teaching you my method on how to make responsive websites using Framer. Follow along as I share concepts like max and minimum width, how to use flex, how to use wrap, grid, and so much more.

📽️ CHAPTERS

00:00 - Intro
00:25 - Project Overview
01:37 - Containers
01:50 - Wrap
03:36 - Mini Width
08:27 - Grid
11:11 - Padding
12:50 - Breakpoints
15:09 - Troubleshooting overlapping elements
16:25 - Navigation Variants

Think we missed something?
Let us know in the comments💬

📱 Find us on SOCIAL MEDIA

#webdesign #framer #freelancewebdesigner #design

[jswanson]

This is fantastic! As a Figma user I love how you can design all three sizes at once and pretty much be done. This is going to save a lot of time. Thanks for sharing.

[mindfulnessparavoce]

Fantastic! I was trying Framer by myself, without watch tutorials, but then I realized how important is to we save time (and patience) to watch it and learn the best practices to use the tool! Much easier to build with the min width! Very helpful to don't need to be adjusting the content in each breakpoint. Thanks a lot!

[zjhart]

Super helpful video! I think it would be useful if throughout the video we could see the Layers tab rather than the Pages tab on the left, so we get a better idea of how the layers are nested and everything.

[Fransilva]

The best video I have seen to understand in the best way how responsive design works in Framer, thank you very much Danny Sapio, everything was well explained with a lot patience and good mood! 🙌

[rklokesh]

This is the hardest video/feature to learn in framer for me.

[GeekMed]

The technique of min-width and wrap helps a lot even with plain html css.
Thank you for the tutorial

[Newbourne]

Fantastic overview - big thanks for pulling this together!

[mr.chinaski]

Awesome content, just started to use it a few days ago for my UI/UX design portfolio and projects

[CharuConsul]

Built my new project on top of this tutorial! Thank you!

[hqef]

You're a great and chill teacher. Too bad that can't be said about everybody trying to show how things are done.

[guapshonen]

Wrap is a gamechanger. Might not work for 100% of the sites you build but it will for a healthy percentage

[romulosousa]

Great tutorial on Framer, I loved it!

[pranitkharat]

really nice, all the basics are covered for beginners

[advmsyed]

Best tutorial I've seen :) Thank you!

[LearnRunes]

Thank you very much for providing such clear instructions.

[KindTom]

Great tutoriual. wish your head thumbnail wasnt covering the user interface . should have at least shifted it the left side of the screen as there wasn't much there that you were talking about.

[See_thru_it_all]

It's driving me nuts that you are not showing the layers. There are small things that are confusing, like what layer or stack you are on when adding the wrap. Other than that, this is helpful, just confusing at times.

[imani]

Would've been nice for you to show us your layers

[lilyyang]

Hi, I have a quick question relating to sizing: when I enlarge my screen size, I want the content on my page to be centered and adjusts automatically as the screen size changes. Which feature or topic should I look into?

[leizagato]

🎉 I want to learn about framer and who do I see.... You Danny Sapio