Design comparison
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
- @ShivangamSoniPosted over 1 year ago
Well there are plenty of ways to do that.
- Setting all the fonts using
rem
. Then usingmedia query
you can adjust theroot 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 thisfont-size: clamp(1rem, -0.875rem + 8.333vw, 3.5rem);
You can learn more about this Here
Marked as helpful1@Wali1209Posted over 1 year agoThanks a lot, @ShivangamSoni This information is new to me I'm gonna try all these three methods.
1@Wali1209Posted over 1 year agoHi, @ShivangamSoni I like the CSS clamp() function and I also modify this project to add some responsive topography thnx to you.
1@Wali1209Posted over 1 year ago@ShivangamSoni My GitHub Pages site is currently being built don't know why is taking so long but thnx for the advanced compliment :)
0@ShivangamSoniPosted over 1 year ago@Wali1209 I think there some issue with GitHub today. My projects GitHub Page deployment also took too long & failed a dew times.
You might wanna try to initiate a redeployment.
Marked as helpful1@Wali1209Posted over 1 year ago@ShivangamSoni Yeah I tried the same thing and it works now my page is online again
1 - Setting all the fonts using
Please log in to post a comment
Log in with GitHubJoin 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