New Responsive Technique for Webflow: Introducing wizardry.

[@christiancreates8658]

I like how calmly you explain wizardry. Always seems so hectic in the Harry Potter movies.

[@meowzord]

It's DIV-iosa, not divosAA!

[@nickjones605]

I've seriously watched this about 8 times now.

[@nickjones605]

9 times...had to double-check something-so far, it's working perfectly. This rocks!

[@teohziyan2727]

I re-watched TimRicks's every video like... countless times 🤣

[@fizakhatri6505]

Same here😂

[@James-om5bj]

Just arrived here from your full walkthrough when you were using WhatFont to calculate the conversion - this calculator is next-level ✓

[@timothyricks]

Thank you, man! Needed a quicker way to figure this out

[@masonthompson3284]

Your entire channel feels like a course!!! Thanks for putting this out. I wish this came out sooner for this ongoing site I’ve made/upkeep because now I wanna start from scratch & set it up this way 😅

[@celiabarajas3265]

I discovered you in the No-code conference 2021 with a stunning video about microsites, and now I see this great tool, subscribed!

[@timothyricks]

Glad to have you here! Thank you!

[@bryanmanio_]

Oh man this calculator is amazing. It's been pretty neat to watch this system of yours progress from where it started.

[@timothyricks]

Thank you, Bryan! It’s been quite a journey so far!

[@tichmajena8056]

I was wrecking my brain trying to get my ems right, your calculator is amazing, thank you!

[@timothyricks]

I was too! It’s already saved so much time when building

[@Sabz1679]

I'm new to webflow and don't quite know how most things work but from watching this video I can see wizardry is something magical

[@aharmon]

KZbin should make a specific use case where you can like Tim's videos more than once. This is gold, thank you!

[@tinashechidarikire]

I become significantly better at Webflow everytime I commit to learning a technique in one of your tutorials. Thank you Timothy!

[@studiotozo]

This is huge. Knowing when best to use em or % or whatever measure is not always evident until you get down the road in the development. This is most helpful.

[@eli.alcaraz]

Oh maaaan. This is so goooood. Thank you so much for this. What a quality-of-life upgrade this is!

[@Pathfindernyc1]

Thank you so much for creating and sharing this. With my amount of Webflow experience, I will be watching your video many times. Very clever and useful.

[@franzruggiero2875]

seriously some of the best Webflow and Web Design content on the entire internet.. thanks man! you're a beast

[@timothyricks]

Thank you so much!

[@hikimjess]

You are a godsend! Thank you for sharing your knowledge and breaking down concepts I never fully understood till I saw your videos! Can't wait to build a website of my own

[@tanyadesplat2271]

Hi Timothy - Thank you so much for sharing your experience and resources with us, you are so great at what you do and am very thankful to have your videos to learn from!!!

[@timothyricks]

Thanks so much for the kind words, Tanya! I’m really glad this is helpful. If you haven’t already, be sure to check out Wizardry 2.0 for the latest updates. kzbin.info/www/bejne/mIG6qHyYmb-Kq5Y

[@scotthumphrey2336]

Your tutorials are brilliant dude. Love how you developed the background colours on your site too, all with CSS! super impressive. Thanks for all your hard work to help expand our Webflow skills.

[@teiflings3420]

been fighting my website for HOURS. i love you.

[@mileswooten]

This is insane Timothy, thanks for sharing. It's going to change the way I design within Webflow. Thank you!

[@robertvidaure6746]

WOW. This is great, and your calculator is making this a breeze to implement. Thanks!

[@bailey6759]

Thank you so much! This is so so so completely useful for my current project and all of the future projects as well! You're an amazing teacher!

[@raerickson3470]

The best tutorial on setting text styling! Other great hints at other elements also - thank you for this!

[@skyvibe1818]

Amazing work, you make life easier for us no-code web designers :D

[@amulpatel]

your content is bossmode. Thank you!

[@fourbreadswholemeal4835]

That's great. I'm just learning Webflow but its nice to have alternative ways for doing things

[@sebastianhickman588]

So pleasing structured! Greetings from Germany.

[@reecegunningham]

Thanks, Tim, this issue has been a nuisance of late and this solves it perfectly

[@billdodson207]

thank you for documenting and sharing this methodology

[@josephberry4188]

Crazy good this man. Ive been using this for a while but with this video has helped me with a few questions I had.

[@MrHazelwood]

Thank you SO MUCH! This is awesome and super helpful, I was intending to ask you about font styling after seeing some of your sites and this nails it. Cheers!

[@timothyricks]

So glad to hear that!! Thank you!

[@gabrielbrasil03]

Dude...You're the highlight of my week so far!! Thank you so much!!

[@danielndrssn]

That calculator will be so useful! I was doing all that with a pen and paper before.

[@timothyricks]

😮 wow. I was just eye balling the design. It was painful. 😂

[@solinterior]

Thanks Tim, this is a great follow up from the first video of this!

[@sw23ae]

Please more context like this would appreciate another video build like you did for the church website build using this new method and calculator. This video will get thousands of views and will help out so many people! Thanks 🙏🏾

[@RachelAkilimali]

Hi Timothy! thanks a lot for your contribution!

[@djmacarson281]

Been looking for a solution for this issue for a while now. Thanks.

[@wendycervera1637]

Dude I wish I knew what this meant. New to Webflow and this feels like wizardry I will need to know. :)

[@rhealisa9268]

This is top notch content! Thank you Timothy!

[@TheHennes36]

Amazing Content! I really want to try this out on my new portfolio I'm going to make sometime this year. Been struggling with responsiveness for my webflow sites for AGES! I think I didn't come across a channel that made me click the subscribe button that fast!! :O Keep up the great work!

[@camodam7987]

Well done man! Love the efficiency

[@Dubvibesonly]

Yo Timonthy - You're the best man! Ty for doing this!

[@jeppenygaardchristensen8645]

Thank you so much Timothy - your help is incredible!

[@barrybrown5]

Extremely handy for mobile design. Love it!

[@labruda]

you are a genius! Thank you so much for this impressive method/technic! Works amazing!

[@losbones]

wow super cool! will clone and check it out!! thanks T.RICKS

[@m.d.atkinson6975]

This is so amazing and helpful thank you!

[@jamesabadfernandez8002]

You're the best man, thank you for this amazing content 💯

[@normthomasmarketing]

This is great! Speedy build times yay!

[@thewebart]

BTW. I love the way you are using Notion!

[@timothyricks]

Thank you!

[@MrHazelwood]

I've just found out about notion, looks great. Do you guys use it for web projects?

[@thewebart]

@@MrHazelwood definitely. Great to track projects, content etc.

[@twbashar]

Awesome, it'll be really helpful, keep it up man 👍

[@kazza666]

So grateful. Thank you.

[@francescocolonna1252]

To contribute to this project and your fantastic video tutorials, Today I subscribed your patreon! great job ❤️🇮🇹

[@timothyricks]

Thank you so much! I really appreciate your support!

[@storyfirstfilms149]

Oh you da man, and I, da fan !! You are the Grand Wizard

[@michaelirava]

Thanks Tim 💯💥

[@thewebart]

Thank you Timothy!

[@kellyosullivan3658]

Amazing, thank you!

[@IkedaDogbo]

So helpful, def will be subbing to your patreon

[@jv-wd4po]

This is great! Thanks Timothy!

[@shaisahmad6778]

NEVER DELETE THIS!

[@МаркАлтиця]

That's a really nice cool technique!

[@danielcobb697]

Needed this months ago. Nonetheless you’re amazing

[@timothyricks]

Same here, man! Thank you! 👊🏻

[@josephgraham6098]

DUUUUUUUUDE. You blow my mind. This is ace.

[@shumensux]

Super high quality sh*t 👌 love it!

[@aname206]

You are my Webflow vanguard. Making my portfolio rn using your cloneables and man oh man. I'm giving you a huge s/o in my about page.

[@nazz7653]

Thank you so much for this, I came to a point where I was moving the size of my Base breakpoint and I had no idea how to make the images and text scale down and to towards the middle while I change pixel views! I was about to give up and go back to Elementor... because I'm on a time crunch. God bless you keep up the good work!

[@petertraversone689]

I thought this was going to be another one of the Webflow University ripoff videos, but I am so glad I was wrong. Can't wait to implement this in my next project! Thanks for your work on this and for sharing.

[@seancaillouette]

so boss! thanks t.ricks!

[@timothyricks]

Happy to help!

[@filiptavi12]

Your content is a fucking goldmine. I really enjoy watching every video of yours as im learning webflow right now. Big thumbs up 👍🏽

[@christianm9712]

Man I just want to say thank you for this... Insta subbed

[@timothyricks]

So glad this is helpful!

[@chrismlone]

Dude, you are a wizard!

[@95D]

great work as always!

[@tasawerashraf5190]

nice explain

[@topemeister3000]

Mad skills as usual

[@rickusjacobs9829]

You are a legend mate!

[@hamza_nasim]

At 6:59 in the video, the calculator gives the body font-size in px whereas today Dec 17 2022, it gives it in em. Is there a specific reason behind this change? I want to learn. Thanks!

[@Londya]

I hope you are patenting this! such a unique technique. I can't wait until your course comes out. I'd like to go ahead and put in a specific request for the course topic, while you are in the process of creating it right now -- I'm most interested in getting your whole web design process for clients - from pre-assessment to design and through development. If this is your process for development (which you are giving out for free! by the way), I can only imagine what your other processes are for determining what a client needs and actually designing in Figma...I know your paid content is gonna be pure gold!

[@timothyricks]

Thanks so much for these great ideas, Londya! As of now, the course will be on WebFlow development and interactions to have enough in the course to really dive deep into that thoroughly. But I’d definitely consider making a design process course in the future! For now, I try to share as much of my design and client process as possible in videos like these. kzbin.info/www/bejne/nKSzpn-IaJuqhbc kzbin.info/www/bejne/b5XSf6akptecgas

[@davidkathrein9644]

You are wonderful!

[@adrbroadcast]

Simply amazing! thanks for sharing : )

[@dankort]

Wow, thanks!

[@matteofabbiani]

You just solved so many problems I had with understanding Webflow! Thank you

[@analyser6062]

You’re a wizard! 🙌🏻

[@eli.shmerler]

This is awesome! Thanks

[@TheJsimes]

Thats T. Rrific !!!

[@OwntoneFilm]

Great tutorial thanks for sharing this! I can wrap my head around everything until the max-width 1440px and for the life of me can't get that h1 to respond over the max-width - it just keeps growing in size - has to be a simple overlook of mine right???

[@timothyricks]

So glad it's helpful! By any chance, are any of the parents of the H1 set to something other than an EM font size? Also, is your custom code changing the body font size to 14.4px at 1440px screen width?

[@OwntoneFilm]

@@timothyricks Thanks for fast reply! Yeah all parents of that H1 show 1 VW for font size...

[@blondmoeller]

Just do a full course and take my money already!

[@elysiumcore]

coming from Ben / Futur - watching and learning 😅

[@timothyricks]

Hi there! Glad to have you here

[@jaywalker.]

This is the one, everyone. It's Webflow Jesus.

[@dude861]

Great technique! Instead of adding this custom code for switching to pixels on big screens, you could also just add another breakpoint and then switch to px there like you did for tablet and mobile breakpoints right?

[@timothyricks]

Yes, you can! So at a 1920px breakpoint, the body font size should be set to 19.2px. Sometimes I accidentally make changes to the larger breakpoint, so I use the media query instead. But either one would work fine

[@thewzrdharry]

Thanks so much for sharing this. I struggle with the difference between em and rem, why should I use one over the other? 😅

[@timothyricks]

EM inherits from the nearest parent font size (or the body if no other font size is set) while REM always inherits directly from the HTML font size. It’s really a matter of personal preference for which one to use. Some devs say don’t use EM while others say don’t use REM. I chose EM for wizardry because it allows us to scale up components independently across breakpoints using font size while REM only allows us to scale up the whole page. One advantage for REM though is that margin set on headings will not increase based on the heading size.

[@thewzrdharry]

@@timothyricks awesome, thanks for clarifying! Makes sense.

[@akilorosky]

my mind is blown!

[@pavishkashyap]

1:32 I can't understand what you have said

[@des7638]

youre a genius

[@akosdoesstuff9208]

This is so cool!

[@josecurado9978]

Hi Tim, thanks for your videos, I've learned a lot. One question, when I use All paragraphs style, the code works very well. When I do it with a class name, it stops working. I would like to use it in other elements of the project. Can you help me? Thanks in advance.

[@Emotioneler]

Holy shit your channel is cool! Webflow goldmine!

[@alexhartan]

This is great Timothy! Where can we find the notion document?

[@timothyricks]

Thanks Alex! It’s at www.notion.so/timothyricks/wizardry-e9b127a32cca4fc592346902d5c5df1b

[@samueljaramillo7144]

you have earned and insane amount of good karma for the rest of your life! thanks soooo much, would love to support you so if I can buy you a coffee say how! :)

[@chakhmanmohamed9436]

Tim hi, idk but the max width is not working at all

[@matsfjellheim4347]

Awesome job :)

[@cernunnos189]

Hey Timothy, I was wondering where you managed to find that liquid ball? I can't find one without a background! I was wondering if you made it, or if it was purchased somewhere.

[@timothyricks]

Hi there! I got it from this website, changed the colors, and made the background a solid color. www.shutterstock.com/video/clip-1047216847-liquid-shape-holographic-colors-ripples-waves-transforming

[@cernunnos189]

@@timothyricks Thanks for getting back to me! Thank you so much :)