Design comparison
Community feedback
- @de-furkanPosted about 2 years ago
Hey great design ππ»
I would recommend using em units instead of px on the media queries. These scale better for different devices. But do have a read on how to do this, because the em works on the default 16px, not on what ever you have scaled the fonts down to. It works a little differently, but do check it out on youtube. I hope that helps :))
Marked as helpful0 - @correlucasPosted about 2 years ago
πΎHello Kaity, congratulations for your new solution!
I saw your solution and I can say you that you've a great solution here, the design is perfect and its fully responsive!
There are 3 things you can do to improve it even more:
1.Use the tag
<picture>
instead ofdiv
to wrap the mobile and design image.2.Create a media query reducing 20% the font-sizes this way the content have a better fit when scaling under 300px.
3.Create a media query to break the pricing section into two rows to save space:
@media (max-width: 320px) { .price { display: flex; align-items: center; flex-direction: column; } }
π I hope this helps you and happy coding!
Marked as helpful0
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