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.
No description
No description
No description
No description
7 Replies
Mannix
Mannix•12mo ago
heading elements have their own default font-sizes 😉
iDropPanties
iDropPanties•12mo ago
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
Mannix
Mannix•12mo ago
because h3 has default font-size of font-size: 1.17em; so it's 32px * 1.17 which is 37.44
iDropPanties
iDropPanties•12mo ago
whoa...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? 😦
Mannix
Mannix•12mo ago
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-size
iDropPanties
iDropPanties•12mo ago
Thank you so much for the help man. Really saved me a shit ton of time
Mannix
Mannix•12mo ago
thumbup
Want results from more Discord servers?
Add your server