font-size discrepancy using rem
Hey guys I am doing a project and I am new to front-end. Doing so, I found something which I cant understand. Could you guys help me with that.
My browser: 1rem = 16px
If i set font-size on using join__cards *....i get expected font-size. But if i set that on its grand-parent div...even though font-size is inhereted (You can see this in the screenshot) font-size is unexpected. I dont understand why this is happening.
Any help would be much appretiated. Thank you in advance.
7 Replies
heading elements have their own default font-sizes 😉
but when i put font-size using all selector..font-size says 32px in computed
only when i put font-size in its grand-parent....fs says 37.something
because h3 has default font-size of
font-size: 1.17em; so it's 32px * 1.17
which is 37.44whoa...rem not only depends on root elem...it also depends on each elem type :(. Thank you so much man...i didnt even know what to search for on google. Thanks for that help. Also if you could...could you tell me the best practice to apply font-size in this case?,,,i just have to put 2rem on each of my card? 😦
if you want your h3 to have 2rem then use that selector to overwrite the default value
rem looks at the root em look at the closest declared font-sizeThank you so much for the help man. Really saved me a shit ton of time
