Tailwind Essentials: Adjusting Height

CSS Tailwind CSS
Transcript

English (Auto-generated)

we're gonna talk about the vid. Sorry to talk about the height because we have already discussed David. So height is also very simple. You need to go with the edge sign, you know the edge literally tells it's something about height. So If you want no height you're just going to apply your H. zero. So it's going to make it no height. But you do not want that. Maybe you want the the one hide you know one pixel hide. You can go with the HP. X. But absolutely this is not what you want. So you're not gonna go with this value But there are more values like H. one H. Three H. Five H. Seven H. Eight or values like that edge H. 10 h. 12 h. 16. You know H. 20. I'm gonna apply the H. 20 for now and I'm gonna go there and this one actually this one I'm gonna apply the H. 21 20 And you can see that we just got the height. We can apply until 96. So I'm gonna apply the 96 now 96. And I'm saving it and I'm going back to the browser you can see that it's quite big but again you just used the you know fixed heights but now it's time for the uh the you know the person date heights. Anyway I was expected it should be there but it is not. So I mean what I can say anyway this let this come back to the to to what we were doing. So you need to know which height you want. First of all you have the option to make it auto, which you can do, I mean when you want the 100% but automatic height so you can do that but if you want a 50% height there is a there is an option Um anyway when we talk about the the you know 50%, there are multiple options you got for example ultimately if you just think of it, you know the highly stops at six and just like you know 50 stops at 12 Heidi stops at six. So anyway um the 36 should be 50%. Okay, Similarly the two, sorry, the 24 should be 50%. Similarly the 12 should be 50%. I mean you know the half of two is one, the half of four is to the half of 63 so ultimately it's 50%. So vice versa, you have the values for the 33 you might be having the 33 on you know 13 and uh to six. So things like that, you know it is just simple as simple as it looks to understand. So maybe you can apply this value now it is the, you know it's not a fixed value but it is you know percentage the value in the percentage. So We got it. Oh yeah this actually sucks because the 100% height would only be covering this area. I mean this text because this is the this is the whole thing it had. So um this is where we get the problem with the percentage height because the the height of this object, the the the parent object is not too much. So ultimately the 100% of the this child object must be within the the parent height. So anyway, um I'm gonna apply the edge full. The edge full legit supply edge full and go back to the browser. You can see that we do not need you, we do not even need to apply the edge full because the fuel is automatically you know There because we are already having 100%. But if we talk about the edge screen and I'm copying this and pasting this here like this way and saving the browser, you can see that it is now breaking everything. It's actually making the its parent bigger too because at, you know, edge screen means, you know, the we're talking about the view ports, height, this is a unit which actually covers the holy screen. It is not like percentage. It's not like pixel, it's the holy screen. This is simply, you know, if you understand the the CSS and CSS units like the VH and VW. So this is nothing new for you. We just got we just applied this property um to the screen. So I think now we got it and similarly if you talk about the minimum height, these are these are some ways for the minimum height and these are some ways for the maximum height. So these values we use when we are working with the, you know, responsiveness is there is one thing that when we are working on height, we actually do not, a lot of times, we do not use the maximum or minimum height because we have the option to scroll the data uh in vertically. So we do not use the minimum or maximum height most of the times. But there is an option. So when there is an option, I just showed you how it is. So anyways, in the next video we're gonna have, you're absolutely going to talk about something else until then stay tuned.
70 Views 0 Likes 0 Comments

Let's adjust the height of different items using Tailwind.

Comment
Leave a comment (supports markdown format)