Responsive rating component. Uses BEM, data attributes and custom prop
Design comparison
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?
Community feedback
- @manishdevelopsPosted almost 2 years ago
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 .
0
Please log in to post a comment
Log in with GitHub
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