Submitted about 2 years ago

interactive-rating-component-main

@Wali1209

A solution to the Interactive rating component challenge

Solution retrospective

Hello this is my 3rd FrontEndMentor challenge My question is about the responsiveness of the Page although in this challenge It doesn't seem that it needs media queries but I have seen some webpages that are too good in terms of responsiveness that their font size constantly decreased when I lower the screen width through developer option can anybody tells how it works if you understand my question?

Code

Please log in to post a comment

Community feedback

Shivangam Soni•1,090
@ShivangamSoni
Posted about 2 years ago
Well there are plenty of ways to do that.
- Setting all the fonts using rem. Then using media query you can adjust the root font-size
- Using Viewport Width (vw) to set the fonts this way it automatically adjusts based on Viewport Width. I have seen this used in some websites.
- Using clamp you can set a min, max & preferred value for the fonts, like this font-size: clamp(1rem, -0.875rem + 8.333vw, 3.5rem); You can learn more about this Here
Marked as helpful

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