calc() lets you do some real CSS magic 

Awesome thanks! The only thing I would add is how important the spaces around the ' + ' are in the calc. It will not perform a calculation if they are not there. Everyone else may know this already, but it bit me for a little bit trying to figure it out.

My favorite calc() trick is this one : html{ margin-left: calc(100vw - 100%); } It removes the "windows jumping" when a scrollbar on the right pops in or out. Perfect for variable/interactive layouts.

The video is about calc(), But I also learned about viewport and vh and vw. This really saved a website I had to restore.

That's an awesome trick. I tested it today and even made it fluid. It may look hackish but it works as expected now. `--wrap-padding: calc( 32px + (128 - 32) * (100vw - (var(--min-width) * 1px)) / (var(--max-width) - var(--min-width)) ); width: calc(100vw - var(--wrap-padding) - 17px); max-width: 1200px; margin: 0 auto; @media screen and (max-width: 320px) { width: calc(100vw - 2rem - 17px); } @media screen and (min-width: 1200px) { width: calc(100vw - 8rem); }`

I have been coding websites for almost 20 years. watching your videos reminds me i have a lot to learn. thank you for the time, skills and know how you share on every video.

Not only do I have a better understanding of how calc works, but you also answered my (unasked) question about making headline text responsive without so media queries.

The calc() function is really awesome indeed! Great tutorial Kevin! 👍👍👍👍👍👍👍👍👍👍

That breakout div is great for creating dynamic content. I build cms sites for clients, but the content they enter is always contained in a bootstrap container. This gives me the option of allowing clients to build their own wide block WITHOUT having to break out of the container and re-instating it. Great tip! Thanks, Kev!

Awesome! I've been working with CSS for quite a while now, but this feature was completely off my radar. This will be VERY useful for me, thank you!

I was introduced to object-fit with this video, and the break out of container technique was clever!

Perfect!!! I loved what you did with the font-size!

Very nice tutorial. First time I've ever seen a clear practical use for the calc function.

This is sooo helpful, honestly. I didn't even look specifically for this but I'm glad it poped up in my recommended section

Yes! I've been waiting for this one. THANK YOU! Haven't watched it yet but I know it will be good!

To prevent the horizontal scrolling issue, I do the following with css calc: calc(100% + calc(100vw - 100%))

Calc is great in many places, but sometimes there's simpler solutions. In the case of the big-image, instead of using a "complicated" calc(-50vw + 50%) (which is, arguably, difficult to understand, especially for newcomers), simply use margin: 0 -3em instead. This will also pull the image 3em to the left and 3em to the right (the combined 6em you subtract from your container). One thing to keep in mind when using techniques like these or when working with EM units in general: local font-size changes on an element will override the EM size inherited from parents. If possible, try to make your lives easier by using REM whenever you can.

Kevin, I want to take this time and opportunity to say a genuine heartfelt thank. Sharing your passion on RU-vid is helping me understand how the modern web is built. My sites are responsive with a modern stylish feel now. I even have confidence to secure paid work now. X

Really nicely explained, Kevin. Thank you!

You are a talented master teacher. Kudos. This tip was useful to me immediately.

Really awesome, I remember trying the calc( ) function, it was tricky, but it now clear and simple

I work for an event app / event website company and we have a left-sidenav that displays on desktop by default with a width of 320px, that can collapse to being around 60px wide. sometimes i need to create a square container so i often find myself using calc functions, or wrapping calcs for max-widths, i had a client the other week who didn't like how when the left-sidenav was collapsed things flexed and stretched, so another useful trick there was width:calc(100vw - 320px); and then wrap that calc function in another calc such as width:calc( calc(100vw - 320px) / 2); so if i have a container with specific info/ a cta it doesn't flex at any point, i can then set it's max width as well so i have this fixed point for larger screen sizes, which if you want to save time could also be made into a css-variable for easier use so you can have --widget-width:calc(100vw - 320px); and use it in the realms of width:calc(--widget-width / 2) or 3 or 4 or etc; and a max width of lets say 1200px, although in this example this is only really used in a media query for min-width tablet and onwards i've found some use to it, especially if you need to make scalable square pieces, then you can do @media(orientation:landscape) { div { width:calc(100vh - 2em); } } and for portrait width:calc(100vw - 2em);

very calm and accurate explanation :) really like your videos , short ,and professional

I been looking everywhere for these very examples. Thanks!

This is brilliant, another tool in the belt. Thanks so much!

This was very informative! Thank you for sharing!

How could I have been living my life without this?

Subscribed! That vw and break out container image is super cool

Awesome video. I stumbled upon it by accident and it solved a problem I had for a long time and thought it could not be solved. Thanks! Great channel!

Thank you for giving me something new to love!

Thx so much for this tutorial... and your other ones as well 🤘

THANK YOU! Just made my image gallery so much easier to handle. Now I can simply mix padding in px's to my img-width in percentage: width:calc(50% - 12px); since I have a 6px padding on each side. Looks exactly as I want it to!

Life changing for images and headings!

Ur the best, Kevin... I've learnt a long more from this video than just the calc()... Many thanks... 😁

Really good function. Congratulations on your video!

This is Terrific!! Thank You!

Awesome video.. that container close and open was a bit too much.. now got a solution with this video. Thanks a million!

5:00 forward the fun starts. I subscribed and hit that bell

wow.... loved it you are great

Hey Kevin, great video. I have a question (not related to calc though), what do you think of using % units (e.g. font-size: 140%; ) for setting fonts of different elements, after setting main font in html selector as font-size: 16px?

Thanks for this, learned something new :)

Great tutorial. Thanks!

Awesome :) I normally use calc() for calculating the height of a container/div and give overflow-y: auto for getting scroll. It helps me in calculating dynamically according to the other content on the page. In your video, I liked the way how we can get the section out from container and styling those. pretty cool.

I can definitely see myself using that full width thing. The alternative is to make a whole bunch of divs that are full width with an inner to constrain content when necessary. Calc() rocks!

Shared and liked! Thank you for sharing this!!!

Very good Kevin, Thank you!

The, er, hidden gem here is the 'overflow-x:hidden' to sort out the 100vw issue, which is going to fix some mobile SEO issues on a couple of client's sites for sure. Thanks for this video!

Thank you Kevin!

I always wanted to know how fittext worked. Very cool.

Tried to use vw as font size, but it was horrible on small screen. This "+ rem" will really help. Thanks Kevin!

Thank you Ross! Good video

Great video! I learned a lot!

Awesome stuff!

Awesome thank you so much!

awsome mate! thanks a lot!

Great info, as usual.

I always learn at least one useful thing when watching your videos.

Cool tricks, thanks! :)

o_o dude, you really know about tracks. Thanks ;)

Just came across this video and subscribed t0 your channel. Really cool content! I will have to play around with it. As a few people here said in the comments, I came for one thing and learned a bunch in the process. Do you know how supported this would be in HTML emails? Most of the CSS I write is tailored to that and I was curious if you had tried it. Thanks.

C'est la vie, c'est incroyable ! thanks from france... - Getting out of the container is great. - Object-fit (i didn't know about !) is huge. Merci chef.

Great Tipps there, Thank you! Especially the font-size trick is really handy. I want to make a suggestion though: To position stuff it’s far less expensive on the rendering (performance) to use transforms rather than margin. You could litterally See the stuttering when resizing the viewport. Margin affects the layout while transforms only touch composite layers.

really interesting!!!! will be having a play! :)

The black & white picture on 0:48 is the HQ of ABN AMRO in Amsterdam.

Thank you for the awesome video Kevin 🙏🏻🙏🏻 calc() is so complicated though 😵‍💫😵‍💫

Top top lesson Thanks so much.

Hi Kevin, I was researching on calc() and I realized that calculation can still work with or without the word calc() in the css. And I see from the start of your video, you also omitted it from the width. So I am wondering if you can tell me what is the implications if we omitted it as I couldn't find any website that talks about that. Thanks

Thanks for your hard work and dedication for us! Nice tutorials! May I know which keyboard are you using?

Very useful function

Cool one :-) Thanks @Kevin

I came here to kill some time watching some nice tips & tricks and that outside the box thing actually solved one of my biggest pains ever. Thank you so much!

About the issue with the vw calculations leaving your item to suck up space behind the scrollbar, it's possible to overcome this. If you dont need to worry about IE its fairly simple. The general idea is to calculate the width of the scrollbar using a bit of javascript, then using css custom properties which can be updated by javascript, and used in the margin calculation. Below is a link to a codepen that shows the technique. codepen.io/anon/pen/JVJjzX For those who doesn't want to go look, this is what the margin expression would look like. margin: 0 calc(-50vw + (var(--scrollbar-width) / 2) + 50%); In english this would translate to: "Move it half of the viewports width out. Move it in by whatever the scrollbar-width divided by 2 is. Then move it further in by half of its own width" In order to calculate the scrollbar width you generate a div, with a width that is greater than whatever the scrollbar could possibly be (say 100px) then you get that divs offsetWidth (outer width) and the clientWidth (innerWidth) By subtracting those two numbers, you have the width that the scrollbar occupies. This can then be used to update the css custom property through document.documentElement.style.setProperty. A working example can be seen in the codepen linked above. Having the width of the users scrollbar can be quite handy :-)

thanks, that was interesting

Object fit, unreal!

its really cool useful!

*Dear Kevin, your lessons are awesome! Hello from Ukraine!*

Thank you kevin,I learnt a new trick today. can we use CSS variables in Calc() like below? ex: font-size: calc( var(--title-fontSize) - 8px); I tried but not working for me. thanks.

i used it for Containers, which are on the same Level. for example: width: calc(100% / 3) dir Three Containers

This font-size with calc is perfect for responsiveness, loved it

Sir You have to make new layout on topics calc() thanks when i declare width: clac() its is necessary to declare width or not i am confuse sir

Nice - Tks!

Thank you :)

Is it possible to use calc() to calculate height based on width? I mean, I'd like to set height = width or height = 40% of width. Is it even possible in pure CSS or SASS?

using calc with big fonts is super useful ;)

4:50 when he uses max-width: 100vw, how come it only fills up the right side and not the entirety of the viewport width? Is it because some other property (like margin-left) overrides it?

Hey Im trying to find out how Facebook new design calcs the widh of images containers on their Newsfeed. If you inspect the photo you will see parent div who haves for example if the original width of image is 500x321 then the calc is width: calc(-506.231px + 155.763vh); I can't find out where the "-506.231px" and 155.763vh; are coming from....

this one is awesome...!!

As a calc believed, thank you!

..love it!

Is there a way to cap the font size? It'd be easy if max() was still available. Without that, how do you prevent a huge font on an 8K monitor? :) I use a resize function to re-calculate font sizes, and if not for the maximum font size issue I'd be able to replace the resize function with calc.

Good tip

awesome....i had no choice but to subscribe...great content

I didnt know css had function It seems that i have a lot of ground to cover, since none of the courses i've taken mentioned that

Amazing, best web tutorials on yt!! Please Kevin can you do a pro video about the scss mixins?

Can calc use the existing value of an element property?

awesome vid :)

Should definitely do a Sass video ;)

Thank you sir

Having been out of web development for over 10 years, calc is something I wished for back in the day and the vw/vh values. Now having to relearn css again with new updated tricks like this it would be nice to know what browsers support this? I don't want to be using features like this if e.g IE / Edge don't support it.

Hi Kevin, please make video on RFS how it works? And how to use it ?

Thanks!!!!!!