Framer Breakpoints in 7 Minutes (Beginner Tutorial)
Вставка
- Опубліковано 9 лип 2024
- In this beginner tutorial you'll learn how to make any website responsive using Framer breakpoints (...and some other techniques).
🔴 Working File: timgabe.com/resources/fully-r...
Timecodes
0:00 - Introduction
0:28 - Adding stacks to text and image elements
0:43 - Adding a frame for overlaying text on video
1:03 - Adjusting widths from fixed to fill for responsiveness
1:36 - Explanation of how text scales with device size
2:15 - Adjusting settings for responsive design
2:45 - Adjusting fixed widths for responsive text container
3:11 - Adjusting image container settings for responsiveness
3:52 - Clarification on wrap functionality and fixed width
4:13 - Using fixed width on items for responsive design
4:47 - Creating tablet breakpoint and adjusting settings
5:15 - Changing individual element settings within breakpoints
5:57 - Adding max-width to images and adjusting padding
6:11 - Creating phone version and adjusting settings
6:41 - Reviewing responsive design across device sizes
7:16 - Fixing positioning issue
#framer #framertutorial
➡️ QUESTION - Have a question about UI, UX or Product Design? Designing in Framer? Or Anything Else? Post in the comments section of this video-I’m happy to answer!
Thank you for giving the alternative methods, it clears many of misundestandings
Hey Tim, your videos saved my life. Thanks my friend!
omgosh so useful. It's been so painful tinkering with the responsiveness aspect in framer.
happy you liked it, my friend!!
your channel is better than the official Framer University. very easy to understand. official instructors are so fast and can't see the screen most of the time because they use dark themes. all the best hope your channel grows
really appreciate that, internet friend 🙏
so good and clear
Tim you are the best teacher
These videos are so useful, keep them coming. 😃
thank you for the comment, will definitely keep 'em coming!!
Great video with explicit explanation.You're the best
thanks a lot charles! 😃 happy it was helpful!!
I needed this..good lesson and direct!
glad you liked it!! 😃
Excellent job
Framer for the the win🎉
Framer for the win!!
True legend🙌
you are, my friend!!
Damn, i need this video like right now 😢
haha, soooon Giorgi!!
This was very helpful; thank you! I'd love to see a video on how to troubleshoot responsiveness issues! I'm currently trying to fix an issue with overlapping containers in bigger iPhone screens (haven't tried Android yet). My website looks as intended on desktop, tablet and my small iPhone 8 screen, but it has multiple overlapping containers that cut off sections when viewing on an iPhone 12 pro max. I've tried some things I've come across in the Framer community posts, but I haven't been able to fix it yet. I wish Framer had one-one-one support. Anyways, videos on an approach, steps, or framework how to go about fixing issues would be so helpful! Thank you for your videos!
great idea for content! thank you!!
@@TimGabe Maybe you can pick a random free template and edit it live. coz I've come across templates where people cramp so many unnecessary frames, spacer blocks etc. when you delete few of them it all goes crazy. I'm forcing my self to learn to use the layouts correct way.. still it's getting stuffed up at times.... :(:(:(. Keep up the good work
hi, any way you know how to make the text BOX fit the text itself..i wanna put many words under each other like a meny but very close touching. not able to adjust for that.
Coming from Webflow, this is so confusing 😂. Do you have to do the stacking for each element separately or is that also linked to a class?
in Framer you don't work with classes as you do in Webflow; it's much more closely related to Figma
amazing , can u Make similar video for figma؟
Stacks are like auto layout in figma right ?
Your videos have been really helpful
yes, exactly!! thanks for the support, my friend!
Hi Tim, i'm working on a project but every time i edit a breakpoint, the primary breakpoint gets affected. Your reply would mean a lot as I've tried everything i know
So I finished my website with all the breakpoints. However, when viewing on a larger screen, it didn't look very good. To try and fix this, all I did was create a version of the site set to 1920. Was this the correct thing to do or did I do something wrong?
that works! 😃
Nice! but how this works with components? How can I choose the breakpoint? Thank you
Same question!
This did not work for me. Used the exact same settings as in the video, but the text will not resize. Any advice?
Hello Tim, I've been trying to build out the other breakpoints of my design. I'm have trouble resizing things easily. In figma you can just use the scale command and everything within the frame scales together proportionally but I seem unable to do that in Framer. I've locked the width and lock in the main frame and all child frame/elements but I cant ever get it to scale properly. Any help would be greatly appreciated!!!
it's hard to say without seeing it in front of me, sorry my friend!
is there a way to limit the widht of the contend and it jsut expand the background on big screens?
yes, you'd need to use max-width on the content and have the background be pinned to the sides! 😃
Thanks, will try that!
bro i have a queastion. so what you did there in the video is that when you changed something in the desktop breakpoint stuff changed in the phone and tablet right, because desktop is the primary. but when you changed in phone or tablet breakpoint nothing changed in desktop. so only changed in desktop breakpoint can affect other breakpoint, is that right? my problem is that in my project in framer i have imported a 3d animation from spline and i have it good and working on desktop breakpoint. i made a phone breakpoint and wanted to resize the imported 3d from spline but when i resized it on phone the desktop changed too. Why is this. I want to work separately in phone so whatever i do i phone breakpoint doesnt affect the desktop breakpoint. For example, Right now i have imported the 3d project from spline with a 200% zoom because that fits the desktop breakpoint. But for the phone breakpoint i have to import the spline project with 120% zoom and slightly more vertical. its hard to explain but easy to show. either way. what i have in desktop and phone breakpoint is not the same. or thats what i want. But i cant do this. Always when i do something in phone everything gets changed in desktop. its so annoying. Please help me. its very hard to explain like this tbh.
i'm hoping to cover spline specific cases in the near future, my friend!
Waiting.... Waiting.... Waiting....
iiiiit’s time!!
@@TimGabe finally!!! ...Time for what? Buying Bitcoin? (:
🙌✨
🌟
Im unable to set the width of text to fill, i added the stack as well
me too,did you work out?
@@zhongkyle I have designed in Figma and used Figma to html plugin, that created the issue. So I did it again and it's solved now.
should work when you have a stack as a parent and if the text is set to relative!
for tablet i have added 2 breakpoints unfortunately how to delete one
just click the whole breakpoint top bar and remove it!
Yooooooh
Give me that tutorial
haha!! coming!!