Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Blog Post Preview

grgrnkoo 300

@grgrnkoo

Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Almost pixel-perfect(without pro and Figma)

The only solution I found about making text shrink with the screen size is to apply vh or vw. Both give a huge flexibility to a font size, so everything breaks.

Can you please tell me other options?

Community feedback

P
Matt Studdert 13,611

@mattstuddert

Posted

Nice work getting so close to the design without Figma! I recommend reading this article about responsive typography to help with your font-size question. You can use clamp() to ensure the text never goes smaller or larger than specific sizes.

I hope that helps. Keep up the great work! 🙂

0

Please log in to post a comment

Log in with GitHub
Discord logo

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