Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Interactive Rating Component using CSS Flexbox & Vanilla JavaScript

@purnimakumarr

Desktop design screenshot for the Interactive rating component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hey, I built this project with vanilla CSS & JavaScript. I used flexbox to build the ratings sections and one media query to fix the design a little for smaller devices & make it responsive. I'm not sure if I have used the best practices but I did the best I could.

Any feedback on how I can improve this project is welcome.

Thank you!

Community feedback

Jon Wright 160

@Dr-Wrong-Mo

Posted

Honestly, it's a small enough project that I think the design works on pretty much any screen size.

I would say that it still looks okay until you get to 300px. So the question is, how small of a screen do you need to support?

According to this thread on ux.stackexchange.com, the minimum screen size you really need to plan on accommodating is 320px.

I think your design is fine as is.

0

@purnimakumarr

Posted

@Dr-Wrong-Mo Hi Jon, Thanks for the feedback. The design does looks fine on almost all devices but the spacing in the ratings section started to mess up a little at about 320 px, so I just fixed the padding in that section using a media query. As it was a small challenge I didn't take the pain to fix it below 300px.

1

Please log in to post a comment

Log in with GitHub
Discord logo

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