Skip to content
Submitted over 2 years ago

Responsive rating component. Uses BEM, data attributes and custom prop

Curtis•30
@cl8396
A solution to the Interactive rating component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What heading level selector to use? As it is a standalone component out of the context of a webpage

Do I place a single h1 on the rating state and not the thank you state? Perhaps a h2 on both headers is suitable?

I used a media query to implement the responsiveness for smaller screens (mobile). However, my solution seems to be quite clunky and inelegant. I have to go in and change lots of font-sizes for both states. Is there a better way?

Code

Please log in to post a comment

Log in

Community feedback

  • Manish Mandal•650
    @manishdevelops

    Hey congrats on completion of this project, your solution looks good to me.. now coming to your query..

    level heading <h1> is important because it's going to display your main content of the page so you have to use <h1> but if you don't need <h1> then simply you can set to font-size: 0.

    And you don't need to change font-size for every devices you can use clamp() function where it you will be required your min-width , max-width, min-font-size and max-font-size and now some mathematical calcs you have to perform .. Now your font-sizes will adjust itself according to the devices. I am providing you the from where you can learn this clamp() function . https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/

    Hope it will help you .

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