New Responsive Technique for Webflow: Introducing wizardry.

Get the styleguide (affiliate link)
webflow.grsm.i...
0:13 Intro to wizardry
1:18 Adding wizardry to a project
2:06 Using the wizardry calculator
3:50 Scaling elements based on the parent font size
4:12 Setting up the section and container
6:05 Implementing a max font size
7:33 Locking aspect ratios
8:45 Adjusting on mobile
9:56 Setting a minimum font size
12:05 Special cases
Wizardry is a responsive technique using EMs that scales like VW but with a max width. Check it out at wizardry-techni...
Join my Webflow Wizards Community
/ timothyricks
Try Webflow using my affiliate link below.
webflow.grsm.i...

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

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

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

[@teiflings3420]

been fighting my website for HOURS. i love you.

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

[@tinashechidarikire]

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

[@aharmon]

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

[@eli.alcaraz]

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

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

[@amulpatel]

your content is bossmode. Thank you!

[@billdodson207]

thank you for documenting and sharing this methodology

[@RachelAkilimali]

Hi Timothy! thanks a lot for your contribution!

[@skyvibe1818]

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

[@robertvidaure6746]

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

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

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

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

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

[@reecegunningham]

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

[@mileswooten]

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

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

[@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 🙏🏾

[@raerickson3470]

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

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

[@nellus1972]

Amazing, thank you. Subscribed!

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

[@wendycervera1637]

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

[@djmacarson281]

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

[@shaisahmad6778]

NEVER DELETE THIS!

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

[@losbones]

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

[@barrybrown5]

Extremely handy for mobile design. Love it!

[@_eugenechia]

Thank you Timothy!

[@solinterior]

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

[@jeppenygaardchristensen8645]

Thank you so much Timothy - your help is incredible!

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

[@kellyosullivan3658]

Amazing, thank you!

[@rhealisa9268]

This is top notch content! Thank you Timothy!

[@kazza666]

So grateful. Thank you.

[@gabrielbrasil03]

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

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

[@m.d.atkinson6975]

This is so amazing and helpful thank you!

[@labruda]

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

[@normthomasmarketing]

This is great! Speedy build times yay!

[@nigbinedion]

You're a genius! Like others, I've watched this over and over again. Had an issue with max-width initially, but that code worked like magic! Insane! Thank you!

[@nigbinedion]

Btw, do you need to add the global CSS to all the pages? To keep the max-width on all pages uniform?

[@timothyricks]

@@nigbinedion Thanks so much! Yes, that css needs to be on all pages so I usually put the embed in a symbol and add it to every page. Also in that symbol is usually my navbar, page transition div, and any other global elements

[@nigbinedion]

@@timothyricks Great! Thank you!

[@camodam7987]

Well done man! Love the efficiency

[@jv-wd4po]

This is great! Thanks Timothy!

[@michaelirava]

Thanks Tim 💯💥

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

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

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

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

That's a really nice cool technique!

[@c3says]

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

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

[@jamesabadfernandez8002]

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

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

[@danielcobb697]

Needed this months ago. Nonetheless you’re amazing

[@timothyricks]

Same here, man! Thank you! 👊🏻

[@josephgraham6098]

DUUUUUUUUDE. You blow my mind. This is ace.

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

[@storyfirstfilms149]

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

[@chrismlone]

Dude, you are a wizard!

[@twbashar]

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

[@filiptavi12]

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

[@davidkathrein9644]

You are wonderful!

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

[@95D]

great work as always!

[@IkedaDogbo]

So helpful, def will be subbing to your patreon

[@seancaillouette]

so boss! thanks t.ricks!

[@timothyricks]

Happy to help!

[@shumensux]

Super high quality sh*t 👌 love it!

[@rickusjacobs9829]

You are a legend mate!

[@christianm9712]

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

[@timothyricks]

So glad this is helpful!

[@topemeister3000]

Mad skills as usual

[@ferdianlie]

Hey Tim. Do you have a web dev online course for beginner? Your tutorial is effin awesome man.

[@timothyricks]

Hi there! I don’t have a beginner’s course but I do have a few videos for beginners. kzbin.info/www/bejne/gX6Qd3qtrpVlgbc kzbin.info/www/bejne/bmLZq5SFaJVqaJI kzbin.info/www/bejne/e16XqX-MrqyqarM

[@dankort]

Wow, thanks!

[@matteofabbiani]

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

[@analyser6062]

You’re a wizard! 🙌🏻

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

[@eli.shmerler]

This is awesome! Thanks

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

[@mikezak23gmail]

Pure gold! Huge timesaver. Amazing wealth of knowledge Timothy, well done. Your videos are beyond helpful. Thanks for sharing.

[@timothyricks]

Thank you so much! Glad to hear this!

[@jaywalker.]

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

[@blondmoeller]

Just do a full course and take my money already!

[@TheJsimes]

Thats T. Rrific !!!

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

[@andyred782]

Hi Timothy, firstly by far the best content on KZbin for Webflow. Thanks a lot. I’ve started implementing this on projects and it looks great. One question, by “art board size” what do you mean. I design on Xd with 1920 x 1080 but use 1200 max width containers. Is the art board in this case the 1920 or the container size? I find if I use my container size the font becomes too big on screens 1360 and below. Thanks for your help and great tutorials.

[@timothyricks]

Hi Bud, thanks so much! Do you mean you have a 1200px container in XD or only in WebFlow? Another words, is your XD design full width or does it have a lot of excess space on each side?

[@andyred782]

Hey man👍 Exactly, the "artboard" size in XD is 1920 but i design with max width container of 1200 in both webflow and xd so lots of space either side. My hunch is that the input to the artboard field on wizardry should be my container width. Just wanted to confirm. Thanks again👍

[@timothyricks]

Oh, yes! You’re correct. It should be the container width.

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

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

[@alexhartan]

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

[@timothyricks]

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

[@elysiumcore]

coming from Ben / Futur - watching and learning 😅

[@timothyricks]

Hi there! Glad to have you here

[@akosdoesstuff9208]

This is so cool!

[@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 :)

[@ramonalisa4187]

Thank you so much for this video! You are such an amazing teacher. So thankful. Question: where you entered the size of the art-board on the Wizardry website, are you entering the size of your Figma/Adobe XD artboard? Or are you entering the size of your Webflow screen viewport? Thanks!

[@timothyricks]

Thank you! So glad this is helpful! I’m entering the Figma/XD art board width. The reason is a 16px font size for instance will look different on a 1920px design than it does on a 1560px design. So taking in to account the width of the original design is important for getting the correct scale

[@ramonalisa4187]

@@timothyricks Ahhhh ok great, I understand now! Thanks again

[@zaccadigi]

Hey Timothy, I love the technique and it works flawlessly, this is a big game changer for responsiveness, thanks a lot for sharing! I wanted to ask you a question: I'm designing the website now on Webflow with this technique but I can notice each and every item, from font sizes to images and everything else, is way too big for the proportions I set. I believe I set all ems for too big of a artboard width... Is there a way to proportionally resize the items without substituting every EMs by hand?

[@timothyricks]

Yes, I’d still recommend substituting them for the correct em values for the best precession but you could wrap all your page sections in a div like a page wrapper and reduce the font size in EMs of that div and then everything inside would scale down.

[@christophernelson2261]

Hi Tim, I could not see to get that max-width code to work. Your screen says "global styles". Is that what I have to implement?

[@christophernelson2261]

Nevermind sorry. What happened was is I added a secondary class to the global "container" class. I removed the second class and now it works. Remember to double-check your work kids.

[@thormoesman2830]

Awesome tool Timothy 🙌Do you have a calculator for margins for fonts?

[@timothyricks]

Thank you! I don’t, but that’s a great idea for a future addition.

[@thormoesman2830]

@@timothyricks Cool. Hope you make it. Keep up the good work.