Making Responsive Websites in Framer

Here is the remix link: framer.com/projects/new?dupli...
Checkout our Framer course: bit.ly/3DdUjHU
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
Flux Academy's Instagram 👉 / flux.academy
#webdesign #framer #freelancewebdesigner #design

[@jswanson859]

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.

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

[@GeekMed1]

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

[@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!

[@FluxAcademy]

Glad to hear. Check out our Framer playlist.

[@mr.chinaski2613]

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

[@romulosousa3335]

Great tutorial on Framer, I loved it!

[@creamdonutco]

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

[@pranitkharat621]

really nice, all the basics are covered for beginners

[@LearnRunes]

Thank you very much for providing such clear instructions.

[@advmsyed]

Best tutorial I've seen :) Thank you!

[@creativereflux4336]

AWESOME! Thanks Man!

[@altaf749]

Really Really helpful!!!

[@v4runs]

this is useful asf!

[@UpAllNightDaily]

Awesome tutorial

[@madhoundes]

You are a genius ❤

[@hqef616]

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

[@kishorekumar8216]

god bless you man ❤👏

[@aimhigh3701]

Great video! Thanks a lot! 🙏

[@KindTom1]

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.

[@guapshonen]

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

[@petermckinnon386]

7.02 So is the hero stack the same as a section, the content stack the same as a container and the 2 stacks below equivalent to div blocks?

[@Michael.design]

So if I understand it correctly, all the settings for the breakpoints you do on the Desktop frame and it will automatically appear/adjust on the smaller breakpoints that u add? So in the end you want to only fiddle around with the Desktop frames and not in each device frame individually? This seems to be a very efficient way of working! So thanks for explaining!

[@dannydiscovers]

You are mostly correct. When you adjust something on the smaller screen sizes/breakpoints it will override the changes made on desktop. Generally setting up everything to be responsive on desktop first before even creating the other breakpoints is best-practice. You can then fiddle with them and override as needed.

[@leizagato]

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

[@maxbardus3019]

Does it make sense to use a wrapper(container) for all the blocks so they fill in the full width of the wrapper but wrapper itself is set to fixed width? Thanks!

[@Steezy967]

I have a question regarding breakpoints that I am struggling a bit with. I see you have set you main desktop at 1600px but that makes a tablet size 1599 and small which is not really right. I tend to stick with there default size but after years of designing at 1440 it doesn’t feel right. I don’t want a tablet breakpoint triggering at 1439 🤷🏼‍♂️

[@B_Migs]

I'm sure you figured this out by now, but Framer has a dumb way of labelling their break points, they even mention how it may not make sense on their own info page, but that you are supposed to think of the original break point number as "And up." This means if your mobile break point is 390, it'll be mobile layout from 390 up til the tablet break point. I agree with you that it makes no sense how it is shown.

[@abupsng945]

guys! please make in depth tutorial video on e-commerce...from scartch to handing over

[@rave_3268]

I'm a beginner, just tried framer, I want to ask, in the section that discusses grids, can that be applied if the component is integrated with cms?(card increases automatically when cms is updated) Sorry, this is the result of the translation if it's hard to understand 😅

[@dsapio]

Yeah works as well in the CMS grids the same way as shown here

[@B_Migs]

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.

[@Rio-by1eh]

What kills me, with most you-tubers is they are simply describing what is on the screen and actually not Explaining …I mean everybody can say “I’m going to move this here” that has no educational value …

[@lhtram85]

Does anyone know what software we should use to record the screen like this tutorial video (from 0:27)?

[@chaya973]

I like that Flux touches on Framer tutorials as well. I'm not a fan of Webflow.

[@FluxAcademy]

Thanks for letting us know!

[@El_X_Will]

Great video, but I was surprised you missed displaying the layers panel, it made this more tutorial more difficult. Also, you could have your little video at a space where you do not cover important content. I appreciate your efforts.

[@FluxAcademy]

Thanks for the feedback

[@vijaygaur4242]

Is it free software to build any types of Websites.

[@AlexanderTopping]

yea mine just wont let me select fill, ive been stuck on this project for days i have no idea what to do

[@Michael.design]

I'm not sure why but somehow my grid columns jump from showing 2 cards to 1 for tablet and then all of a sudden 2 again to finally go back to 1 column again.. I've tried everything but I can't find the problem.. Anyone an idea why that is? Tablet and phone breakpoints should result in 1 column. The grid layout is set to 'Auto'.

[@pris.v]

having the same problem, cards on desktop don't show as they should, then on tablet version they are hidden, can't fix this really.- did you find a solution?

[@adeyemiajibola4751]

Is it as responsive as an html website?

[@Rio-by1eh]

Is the “STACK” another term for a “DIV “…?

[@itsbeck6590]

spent close to 7 hours on tutorials for responsivenesss, i follow the steps flawlessly and somehow it doesnty wortk. Getting incredibly frustrated with this builder, have a deadlin e coming up. Can anyone help?

[@creamdonutco]

This is the hardest part

[@eyalabadi1]

thank bro but the fact u ae on page tab instead of layers are make it difficult

[@esu_uxui_designer]

How to use responsive web design in figma

[@HeeneyOG]

This video was informative but at the same time annoying... You explain how to do some stuff then just drag over premade stuff from an existing template? Like creating the card components... Would have been nice if you re-made all components again for the tutorial instead of saying "heres one i built earlier" and dragging it over.