calc solved for my problem with keeping footers stuck to the bottom on different viewports. Just add this to Your main content class: .content { min-height: calc(100vh - [footer height]px); }
Yup calc is awesome but what if the footer's height is not fixed how do you subtract it? Here's a better solution for example you want a 3 column layout, a header, content and the footer that sticks to the bottom even if there's little to no content at all. With CSS grid you can set .app{ display: grid; grid-template-rows: 100px 1fr auto; height inherit} provide the body's height is 100% or 100vh
I literally watched the Kevin Powell one he did and told him I was dissapointed he didnt talk about the space on 2:51 that you did lmao I love you guys you two are my favorite to watch online for html css and js :)
whenever I come to your videos. You send me to learn something else, which will send me to another video. But let's be honest. WEB DEV SIMPLIFIED is just THE BEST. period.
I have a jumbotron that would not work until I made the height = height: calc(1 * calc(.5 * 100vw)); I have never used calc before, but now I think it really is magic! Glad this tutorial was available to help me. Thanks!
You prolly dont care but if you are bored like me during the covid times then you can stream pretty much all of the new movies on instaflixxer. Have been streaming with my gf these days xD
Awesome explanation in a very short video . Liked it. Okay, I have a question. If I declare a variable in css with calc() , how can I call the variable in javascript?
Hi Guru, Please make some videos on event loops . How different tasks are executed in loop. How to create new loop etc. your simple ways are really great. Thanks a lot.
I love your videos buddy..... As a web developer i too more interested and have passion to do videos like you.. May be in future i will make videos which are very inspired to me.
Kyle, is it possible to append units to unitless numbers through calc()? I've read it's possible by multiplying the unitless number by 1 and putting the desired unit next to the 1. It's possible with all units except "%", because calc() would determine the percentage instead of just adding the unit to the number. I know SASS does allow this, but CSS doesn't, which is unfortunate 😥
Hey, first of all, amazing videos. You actually make me want to keep on learning this. Anyway, what’s the difference between making a variable in :root {} or anywhere else? Is root like the “base”, where you set the variable’s initial value and then can alter it later on?
Old question, but... CSS custom properties are scoped. Setting/resetting a custom property somewhere makes it available for all descendants. Defined in :root, it will be available everywhere.
Can you include current css properties of elements? For example: left: calc(this.left - 100) px; EDIT: I just read your comment that calc cannot know the current size of an element.
I'm just learning about css variables and calc and seeing them together is great. I'm having an issue I hope you can help with - I have a div that the user can resize using javascript, and I want the font inside it to grow and shrink to fit into the div. So say div is 200x50 and font-size is 16px can I use css to calculate the new font size using calc() as the user changes the dive to say 400x100. Thanks, great work though!
This is going to be really tough to do since all fonts are different sizes and fonts themselves have different sizes of each character. For example the text lllll will take up less room than OOOOO.
@@WebDevSimplified I thought it might be, I was thinking for the starting size you have a font-size of 14px and then calculate it based on width/height of the div from the stating values. but not sure you can use the current width and height in the calc function...
Interesting, you have a tut website, which is good as you are super clear and concise in your presentations. The pricing seems a little too ambitious tho, given there are some very good courses and tutors who undercut you. Hmmm.
I totally understand. There are a lot of good cheap courses out there, but I feel that my course is concise and well explained enough to justify the higher price, especially considering the amount of free content I have to back it up.
I did a quick youtube search and I found that most type of these vids have the same thumbnail which is understandable but we can all agree that they were not eye appealing (catchy)! I can help you design thumbnails if you want to.
just love these kind of short videos make more such like these.
I have plenty more like this planned.
Wow, I really didn't know about css variables. This is extremely useful!
Css is so underestimated but on the latest years grew so much, is insane what you can do with it
It is incredible. CSS was one of the things that made me really love web development.
Your tutorials always short give the answer I need to and in simplified way, keep it up
calc solved for my problem with keeping footers stuck to the bottom on different viewports. Just add this to Your main content class: .content { min-height: calc(100vh - [footer height]px); }
Yup calc is awesome but what if the footer's height is not fixed how do you subtract it? Here's a better solution for example you want a 3 column layout, a header, content and the footer that sticks to the bottom even if there's little to no content at all. With CSS grid you can set .app{ display: grid; grid-template-rows: 100px 1fr auto; height inherit} provide the body's height is 100% or 100vh
@@paolo-1283 Keeping it absolute and bottom: 0px woudn't be a better approach? Grid template always comes out as troublesome and too verbose for me.
@@ralpholiver2889 the key too solving problems with grid is the align-content center and align-content start
@@paolo-1283 but flex does that too, with less verbosity.
@@ralpholiver2889 yeah i agree, flex is one dimensional, grid is two
best teacher
Too right, mate. Very well explained. GJ
I literally watched the Kevin Powell one he did and told him I was dissapointed he didnt talk about the space on 2:51 that you did lmao I love you guys you two are my favorite to watch online for html css and js :)
Man you videos are excellent! And so are you :)
Great as usually , thanks !
Your video helps me update my outdated css-html knowledgebase.
Very Easy to Understand, Thanks for great video.
You made my day....Thanks love from India.
Thanks Mr. Cook for "cooking" these videos.
You are very welcome!
He deserves many more subscribers...
That was neat.
Thanks for sharing!
Your videos are soooooo easy to understand, thank you a loooooot
helped me alot!!! thanks you so much!
whenever I come to your videos. You send me to learn something else, which will send me to another video. But let's be honest. WEB DEV SIMPLIFIED is just THE BEST. period.
Love these videos!
Great video 👍. Thanks 🙏
Great Work.
Nice simplified technic brother 👍
Amazing bro, thanks a lot. I learn a lot from you
I have a jumbotron that would not work until I made the height = height: calc(1 * calc(.5 * 100vw)); I have never used calc before, but now I think it really is magic! Glad this tutorial was available to help me. Thanks!
CSS was always so boring for me, I never tried to learn it in depth. Your videos making me in love with css, thank you
bruh I didn't even know that CSS Vars exists :D
They are pretty amazing!
Me too neither!
@@WebDevSimplifiedbut Sass is much more powerful when it comes to using variables, is it not ?
You prolly dont care but if you are bored like me during the covid times then you can stream pretty much all of the new movies on instaflixxer. Have been streaming with my gf these days xD
@Jaxxon Jason Definitely, I've been watching on instaflixxer for months myself =)
Thanks bro, your videos are amzing!
tnx for the info 6mins vid and really got it man.
Das Video hat mir sehr geholfen. Vielen Dank
Good shit dude!
Great explanation! I must remember to use calc. The only thing missing was some mention of browser support (or lack thereof).
Good point. Calc is pretty much universally support except in Opera mini and some edge cases in IE.
@@WebDevSimplified CSS variables seem to have slightly less support, i.e. none in IE.
@@bertilow If anyone is still using IE 11 or earlier, then they don't deserve to be on your website :) Question is what about Edge...
Thanks, Kyle.
Very useful tutorial
Thank you Kyle
Awesome work! ....I always thought I could only use variables in sass :( Thank you!
Me too 😂
Variables are probably my favorite newer feature to CSS.
Tysm!
Awesome explanation in a very short video . Liked it.
Okay, I have a question. If I declare a variable in css with calc() , how can I call the variable in javascript?
So good tutorial
Hello,thank You! how can I have something like this: calc( 200px * 1600px / 1500px )?
Hi Guru, Please make some videos on event loops . How different tasks are executed in loop. How to create new loop etc. your simple ways are really great. Thanks a lot.
That's a good suggestion. I will add it to my list.
thanks for this video
Brother this is really awesome and easy to understand nice work 👍😊
Do you have a video of how to calculate the margin paddings values?
You are great !!
loved it.
Awesome !
BTW you explain really good!
you're awesome!
ty!
amazing thank u so much sir
You're welcome!
calc function :
1). 2 different unit
2.) CSS variable (--x, root)
Please show us how to give a card drop-down a position in a view port/scroll-view
I love your videos buddy..... As a web developer i too more interested and have passion to do videos like you.. May be in future i will make videos which are very inspired to me.
Thanks
First Like Bro👍
This is so cool 😎
css variables!!!!!! I feel like finding alien life!😂
wait, why in 5:17 container have red color?
isn't in 4:41 he delete container css?
Kyle, is it possible to append units to unitless numbers through calc()? I've read it's possible by multiplying the unitless number by 1 and putting the desired unit next to the 1. It's possible with all units except "%", because calc() would determine the percentage instead of just adding the unit to the number. I know SASS does allow this, but CSS doesn't, which is unfortunate 😥
Very good
I had no idea before this that calc function also exist in css
Hey, first of all, amazing videos. You actually make me want to keep on learning this.
Anyway, what’s the difference between making a variable in :root {} or anywhere else? Is root like the “base”, where you set the variable’s initial value and then can alter it later on?
Old question, but... CSS custom properties are scoped. Setting/resetting a custom property somewhere makes it available for all descendants. Defined in :root, it will be available everywhere.
Love this video, really easy to understand and straight to the point! :) thanks!
WOW!! This is great. I see myself using this. (-:
I'm glad you liked it!
thnx bro
Hello Kyle can we get your codes from Github
Can you include current css properties of elements? For example: left: calc(this.left - 100) px; EDIT: I just read your comment that calc cannot know the current size of an element.
I'm just learning about css variables and calc and seeing them together is great. I'm having an issue I hope you can help with - I have a div that the user can resize using javascript, and I want the font inside it to grow and shrink to fit into the div. So say div is 200x50 and font-size is 16px can I use css to calculate the new font size using calc() as the user changes the dive to say 400x100. Thanks, great work though!
This is going to be really tough to do since all fonts are different sizes and fonts themselves have different sizes of each character. For example the text lllll will take up less room than OOOOO.
@@WebDevSimplified I thought it might be, I was thinking for the starting size you have a font-size of 14px and then calculate it based on width/height of the div from the stating values. but not sure you can use the current width and height in the calc function...
@@harag9 You cannot use the current size of something in the calc function. CSS does not know of the current size of objects.
Not tried, but what if -hew in :root is set less than 180?? Don't know if negative values in hue also work
Tq
i swear every question I have he got a video on dat joint
My guy doesn't blink.
Interesting, you have a tut website, which is good as you are super clear and concise in your presentations. The pricing seems a little too ambitious tho, given there are some very good courses and tutors who undercut you. Hmmm.
I totally understand. There are a lot of good cheap courses out there, but I feel that my course is concise and well explained enough to justify the higher price, especially considering the amount of free content I have to back it up.
make more front end projects? and stuff
that bluish greenish color is cyan
THANK YOU VERY MATCH!
Done
i really hate calc coz its kinda hard, can i stick with the other units?
nice
good
wt. you the best. period.
calc(calc(calc(100% * 2) / 10) + 10px) ? not working! why?
Please, author, add subtitles if you can
Wow
👍👏
More correctly, "That's the first 1/10th of what there is to know about the CSS calc() function."
I learnt it in 3 min. Guess how
Double speed
...almost 7 mins :)
Six just sounds so much better though :P
Says 6 minutes
Video lasts 6:41
Clickbait 101 ;P
Oh nooo, where my subtitles?
2nd comment bro
I hope my gf doesn't see your video.... You are too handsome
Even 2x playback is too slow.
If you change your thumbnail you'll get more views.
What do you recommend I change it to. I am pretty terrible at thumbnail design, and people at least know that this type of thumbnail is my style.
I did a quick youtube search and I found that most type of these vids have the same thumbnail which is understandable but we can all agree that they were not eye appealing (catchy)! I can help you design thumbnails if you want to.
@@ko3li668 If you want to help send me an email at the email on the about page of my channel.
thanks