Design comparison
Solution retrospective
done in about 1h30, which was my initial estimation.
What challenges did you encounter, and how did you overcome them?Automatic scaling of fonts using clamp() : didn't know about this !
Also handling the image on the desktop version was quite tricky : had to use a grid to do this, but would like to know another way to do it.
Community feedback
- @rohankhan5655Posted 3 months ago
- For automatic font scaling, I’ve learned to use the clamp() function, which has streamlined the process and improved responsiveness.
- Regarding image layout on the desktop version, while using a grid was effective, I am interested in other techniques that might offer more flexibility or efficiency.
Best Solution: Using the clamp() function is a robust solution for responsive typography. For example, font-size: clamp(1rem, 2vw, 2rem); automatically scales the font size between a minimum of 1rem and a maximum of 2rem, with 2vw as the preferred size.
Best Solution: While using a grid is effective for many layouts, other techniques such as Flexbox or CSS Grid with media queries can also be used. For instance, Flexbox allows for responsive image alignment and distribution, while CSS Grid provides more control over complex layouts. Using object-fit properties like object-fit: cover; can also ensure images scale well within their containers.
Marked as helpful1
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