Design comparison
Solution retrospective
- Updated design/colors for a11y.
- Added GRT text [golden ratio]
- updated semantic html.
Community feedback
- @correlucasPosted about 2 years ago
👾Hello Matt, congratulations for your new solution!
Your solution is really good done and full responsive, something you can do to improve it, is to give at least 20% less the font size when the mobile version becomes 340px to make the font-size fit the container.
To make the solution even more responsive, you can add this media query to avoid the pricing to pop out the container after 280px (the layout breaks)
@media (max-width: 320px) { .price { display: flex; align-items: center; flex-direction: column; } }
👋 I hope this helps you and happy coding!
Marked as helpful1@warehouse827Posted about 2 years ago@correlucas I was thinking of circling back around to this and trying clamp() on the h1 (headline), body text, and "prices".
In testing, I did not review below 375px. That was an oversight on my part. Thank you!
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