some height classes like .h-1/2 etc are not working...?

[Ochirpurev20]

Here is my code that height classes are not working:
:::::::::::

mail@pairlink.mn

</section>
<!-- main container starts here -->
<div class=" bg-blue-300 **h-2/3**">

    <div class="container">
    <p class="text-base text-black">PAIRLINK LLC main </p>        
    </div>
</div>
<!-- all 3 section'll be contents -->
<section class=" bg-green-400 **h-1/2**"> <p class="text-white"> Solutions we provide</p></section>
<section> </section>
<section> </section>
<!-- here goes footer -->
<section> </section>

[simonswiss]

Hey!

These will only work relatively to the parent element from where the class is applied, since they're percentage values.

I have made an example where your code is wrapped in a h-screen container (full height of the viewport). You can see the two sections taking 2/3 and 1/2 of the height in that case:

https://play.tailwindcss.com/HRNm5g8JF7

Same deal if the parent is h-80 (20rem) in height - the two sections will use 2/3 and 1/2 of that height:

https://play.tailwindcss.com/pYMkx7taUl

Hope it helps!

[Ochirpurev20]

thank you very much. that helped a lot. and it was my bad.

…

On Thu, Dec 10, 2020 at 2:10 PM Simon Vrachliotis ***@***.***> wrote: Hey! These will only work relatively to the parent element from where the class is applied, since they're percentage values. I have made an example where your code is wrapped in a h-screen container (full height of the viewport). You can see the two sections taking 2/3 and 1/2 of the height in that case: https://play.tailwindcss.com/HRNm5g8JF7 Same deal if the parent is h-80 (20rem) in height - the two sections will use 2/3 and 1/2 of that height: https://play.tailwindcss.com/pYMkx7taUl Hope it helps! — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#3022 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AMB66I2DTMQVFYSNRMNV3Z3SUBQ6ZANCNFSM4UQQWLGA> .

[simonswiss]

Glad it was helpful! 👍