Frontend Mentor | interactive-rating-component-main coding challenge solution

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?

Community feedback

Shivangam Soni• 970

@ShivangamSoni

Posted over 1 year 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

Muhammad Wali• 210

@Wali1209

Posted over 1 year ago

Thanks a lot, @ShivangamSoni This information is new to me I'm gonna try all these three methods.

Muhammad Wali• 210

@Wali1209

Posted over 1 year ago

Hi, @ShivangamSoni I like the CSS clamp() function and I also modify this project to add some responsive topography thnx to you.

Shivangam Soni• 970

@ShivangamSoni

Posted over 1 year ago