
Smoothly responsive landing page with the help of clamp
Design comparison
Solution retrospective
Figuring out SCSS and formula to use for clamp. With this, you can see how font sizes go from big to small, smoothly, without sudden jumps. I think it is a much better way than using @media
, although it also has its uses, of course.
This formula is already explained in README.md file.
What challenges did you encounter, and how did you overcome them?SCSS variables are not meant to be in :root
. I found that out the hard way... actually reading about it... the horror.
How to have a background image? You watch a tutorial, and then you do it your own way. Yeah...
Community feedback
- @TarestaPosted 4 months ago
I loved your solution, especially using the clamp for the responsive size across different screen widths. I read the explanation in your README file. The equations are well explained and you also provided an example. Thanks for that. I had always set up the middle value randomly, something of an average between the highest and lowest, but now I know how to calculate it properly.
The approach of making each section responsive across all screen sizes before moving on to the next one is also well-thought out. Keep up the great work and all the best for your future challenges.
1P@RetroApePosted 4 months ago@Taresta Thank you for your kind words. I am glad someone appreciates the equations (‾◡◝)
If you liked that, wait till you get a load of this Andy Bell – Be the browser’s mentor, not its micromanager
The title says it all, but there is a segment in the video where Andy explains how he uses
clamp
; it is even more complex than what I did, albeit the foundation is the same. No equations, unfortunately.There are actually sites that let you calculate your values; he mentions it in the video. I recommend to check the video out.
Best of Luck!
1
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