calc() lets you do some real CSS magic

[@biomcanx1]

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.

[@KevinPowell]

Good point Gene, I probably should have talked a bit more about the very basics of it right off the top before diving in deeper.

[@franktielemans6624]

@Gene Price that's right, you can't also have a space between the calc function and first opening bracket. @@KevinPowell Did you ever experiment with calc and CSS variables? I tried to and it seems that you can define variables to a calculation but you can't calc with the variables. At least I don't know how.

[@kolklik]

@@franktielemans6624 Sure you can calc with variables/custom properties. jsfiddle.net/aLs8zv5h/

[@ynnoz4452]

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.

[@kuranam]

How could I use Calc, to preserve the height and width of a image. I am making an ePub, and the picture pass to another Page and it show clipped.

[@pineapplerindm]

@@kuranam 2 years late but you don't need calc - you can use `aspect-ratio` (or `object-fit: contain`, though that won't change the height/width, it'll only keep the image undistorted)

[@thehigherman9918]

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

[@YungSchmutz]

Samesies

[@badihbarakat5832]

I learned a couple of new css attributes I didn't know about. I didn't even know I can hide the scroll bars without affecting the flow of the contents...

[@mr.webdev3700]

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

[@jenstornell]

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); }`

[@milleniummoses]

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.

[@boombaby1769]

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!

[@crooker2]

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!

[@MoeBass]

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

[@GnomePuntTrainerYT]

The break out container technique is mindblowing to me. I won't have to wrap a div or section or something around the text that I'd like to give a background for.

[@120tonns]

developer.mozilla.org/en-US/docs/Web/CSS/object-fit

[@violet-trash]

Object-fix is amazing, I can't believe I spent so long making divs with image backgrounds like a sucker.

[@bruhcsp]

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

[@busyrand]

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

[@novachi09]

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

[@techscoville]

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

[@moy2010]

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

[@KevinPowell]

Hrm, never would have thought of that, cool :)

[@stepanostapuk4120]

Calc in Calc bad work for IE and Safari

[@radoslawzielinski9016]

which rule do you apply that to please?

[@franktielemans6624]

@@radoslawzielinski9016 to the html element or body element i guess

[@AdolfoBarreto75]

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

[@jmerino06]

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.

[@PeggyOConnor1946]

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

[@sonydroid2253]

Kevin, I want to take this time and opportunity to say a genuine heartfelt thank. Sharing your passion on KZbin 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

[@JohnMcCormack]

Really nicely explained, Kevin. Thank you!

[@danielelgressy]

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

[@Tryanide]

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.

[@laht93]

Using calc(-50vw + 50%) does have the advantage of working within any parent container, no matter the width. You could make it a class to put on things, (almost) regardless of context.

[@erezspeiser4976]

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!

[@briankgarland]

I been looking everywhere for these very examples. Thanks!

[@MisterMajister]

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!

[@leogarza5022]

This was very informative! Thank you for sharing!

[@jovaniedelacruz]

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

[@Griesinho]

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

[@philmyglass877]

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

[@badihbarakat5832]

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

[@jamesrosemary2932]

How could I have been living my life without this?

[@drewbird87]

Thank you for giving me something new to love!

[@Kozi03]

Life changing for images and headings!

[@brunoliveiralcantara]

Really good function. Congratulations on your video!

[@soultouchingsongs]

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

[@mohan9285]

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.

[@sashikantanayak6354]

Very good Kevin, Thank you!

[@5tevend]

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);

[@RockstahRolln]

This is Terrific!! Thank You!

[@sshuddho]

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

[@nonchalant8473]

Great tutorial. Thanks!

[@noelabey]

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

[@fluntimes]

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!

[@Valky1954]

Thanks for this, learned something new :)

[@Brandonstiles]

Great video! I learned a lot!

[@OutOfNameIdeas2]

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

[@mkmalikcom]

wow.... loved it you are great

[@Zefrem23]

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!

[@Max_Griswald]

My god, this was such a lifesaver for me...

[@richtraube2241]

Great info, as usual.

[@nazanin_ashrafi]

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

[@fragrantbloom]

Thank you Kevin!

[@franktielemans6624]

Awesome stuff!

[@dean6046]

Thank you Ross! Good video

[@vjvizar]

Cool tricks, thanks! :)

[@holalabellebille]

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.

[@KevinPowell]

De rien! And if it's easier for you to write comments in French, go for it. I can read it no problem, I just can't write it to save my life 😂

[@stell4you]

"Object-fit" is not supported by edge, so you might wait until MS switches to webkit engine.

[@KevinPowell]

It's supported by Edge for images, just not video

[@lewiekab]

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

[@marv92]

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!

[@KevinPowell]

So glad to hear that Marvin!

[@TheElkster]

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

[@TheBorsten]

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.

[@johnaweiss]

Yes, i noticed the stuttering too. Can you share the transform code to do the same thing?

[@farhanawan9956]

Awesome thank you so much!

[@michaeloosthuizen2383]

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

[@gunasekarant6498]

Cool one :-) Thanks @Kevin

[@czawiel]

awsome mate! thanks a lot!

[@aaronaaronaaron5922]

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

[@SalamoYemen]

Top top lesson Thanks so much.

[@alinisar87]

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?

[@klaasvaak4110]

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

[@yallayeho1238]

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

[@kubakakauko]

thanks, that was interesting

[@xmelsky]

Very useful function

[@billaddison82]

Object fit, unreal!

[@yassmaboby296]

its really cool useful!

[@deathtoby]

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

[@markjordan7800]

using calc with big fonts is super useful ;)

[@technophile7024]

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

[@KevinPowell]

It's an old Dell mechanical keyboard. I don't know the model and I'm not on my computer right now, but if I don't answer this now I probably won't see your comment again :\. I did a quick google search, found some that look similar, but I didn't see my exact model

[@technophile7024]

@@KevinPowell Thanks for your swift response! Don't worry! I loved your tutorials!

[@kolklik]

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

[@VovaBlow]

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

[@crunckNATIon]

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

[@KevinPowell]

Thanks for the sub, glad you liked it :)

[@AlThePal78]

awesome vid :)

[@lucastavares206]

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

[@moza260]

this one is awesome...!!

[@Alessandro-nq3tm]

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

[@KevinPowell]

Got it on my list 😁

[@rushikeshmore2809]

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

[@FER_R]

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.

[@twph.5890]

Thank you :)

[@CarlStreet]

Nice - Tks!

[@StefanIvanov188]

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

[@rafi_45]

Thank you sir

[@yenumulasrinivasareddy5825]

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.

[@johnaweiss]

Can calc use the existing value of an element property?

[@greenmansession]

Should definitely do a Sass video ;)

[@tanveerkhan9430]

Good tip

[@shohanrahman9392]

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?

[@borcsaster]

..love it!

[@moizkhalid2714]

Could you tell us how to start html and css for website templates in psd.. How to aprouch

[@KevinPowell]

I have a few series where I do that! Look for my 'building a responsive page' type series.

[@youssefmuhamad3213]

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

[@ahsath]

Almost didn't click on this video, I'm glad i did.

[@DonAndress]

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?

[@lewisrobinson508]

I've been playing with calc() and custom properties to generate responsive font sizes while being able to set a min/max font size. Eg. :root { // font sizes --fsMin: 16; --fsMax: 26; // viewport widths --vwMin: 420; --vwMax: 1280; } html { font-size: calc((var(--fsMin) * 1px) + (var(--fsMax) - var(--fsMin)) * (100vw - (var(--vwMin) * 1px)) / (var(--vwMax) - var(--vwMin))); @media screen and (max-width: 420px) { font-size: calc(var(--fsMin) * 1px); } @media screen and (min-width: 1280px) { font-size: calc(var(--fsMax) * 1px); } } ---- codepen: codepen.io/lewisvrobinson/pen/VWoNLP?editors=0100

[@KevinPowell]

Really cool. That initial font-size calculation broke my head a little, lol. Works super well!

[@himanshuverma3764]

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

[@0the0ambient0]

As a calc believed, thank you!