Responsive blog preview card using flexbox and clamp() functions

Solution retrospective
I like how I managed the text responsiveness without media queries by using the clamp() functions. However, I set their parameters based on calculations I made on the side so they look like arbitrary values. Maybe next time I should find a way to do them directly in the stylesheet but that seemed too complex for the size of this project.
What challenges did you encounter, and how did you overcome them?The clamp() function takes a min, max and 'preffered' size of text which you can specify in a relative unit like vw. Problem was, the blog card reaches its maximum size quite quickly and after that point even if screen keeps getting bigger, the card stays the same. But because text size is in vw, the text in the card keeps growing. And in this case, we don’t want that – we want the text size to be dependent only on size of the card, not on screen size. I solved this by calculating on which screen width the card reaches its maximum size and set that as max viewport width in https://utopia.fyi/clamp/calculator for each text preset (min I set to 375px, the width of the mobile design in the figma file)
Please log in to post a comment
Log in with GitHubCommunity feedback
- @pabjunior
Great job on the project!
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