Submitted almost 2 years ago

Interactive Rating Component Using Vanila CSS and JavaScript

Rony Lee• 40

@ronylee11

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Interactive rating component

HTML
CSS
JS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

When should I use rem, em, vh, vw and %? ( Like to be exact which one is for margin, which one for padding, which one for min-width max-width, max-height min-height, border-radius... ) I find myself using px all the time and I know its bad for responsiveness, but I just don't know which one to use instead...

Community feedback

Szabolcs• 330

@Szabolcs-Zeg

Posted almost 2 years ago

Hello @ronylee11,

congrats on your solution which looks great. You have right: if you only use 'px' you may have problems with responsive display. The ‘px’ is the only fixed unit, all others are relative. Their use depends on the situation, not the type of element. It is worth getting to know them well, because their correct use can make your work easier. You will find many useful videos on video sharing sites. E.g: https://www.youtube.com/watch?v=N5wpD9Ov_To&ab_channel=KevinPowell or, https://www.youtube.com/watch?v=-GR52czEd-0&ab_channel=WebDevSimplified

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord