
Design comparison
SolutionDesign
Solution retrospective
What are you most proud of, and what would you do differently next time?
I used the Figma layout and I tried to do my best to match the result with the design.
What challenges did you encounter, and how did you overcome them?Several challenges were kind of hard to achieve.
- I finally used
width:66vw
in the mobile screen size to make the whole card responsive in all sizes. - I was pretty busy matching the width in the desktop screen size
box-sizing:border-box
fixed the issue. - I used the exact font size and font properties, but my result was slightly different, so I set the
desc
class, font size to 17px; instead of 16px and got a better result.
I think I need some help with the understanding difference between the results, even when you use the exact font and exact font-size and font properties.
Also having a fully responsive card in all the mobile sizes made me to use 66vw
as width of the card, but I think, there must be a better approach.
Community feedback
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