Design comparison
Community feedback
- @correlucasPosted about 2 years ago
๐พHello @edbizichjr, congratulations on your new solution!
I've just opened your live site and I can say that you did a great job putting everything together! There are some tips to improve your solution:
1.Use relative units as
rem
orem
instead ofpx
to improve your performance by resizing fonts between different screens and devices. These units are better to make your website more accessible. REM does not just apply to font size, but to all sizes as well.2.Its not so good that you used
overflow: hidden
for the whole content, in this case this property is making the content get cropped when the component gets tiny. Instead of usingoverflow
to make the rounded borders useborder-radius
for each card.3.To make your solution even better and more responsive, you can create a media query to break the elements in the
pricing section
afterwidth: 350px
and make every content in a different row, saving space for low resolution devices.@media (max-width: 350px) { .chosenPlan { width: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: center; margin-bottom: 1.75em; padding: 1em; background-color: hsl(225, 100%, 98%); border-radius: 8px; } }
โ๏ธ I hope this helps you and happy coding!
Marked as helpful0@edbizichjrPosted about 2 years ago@correlucas Thanks so much for your feedback and explaining why! It helps on this learning journey.
0 - @faha1999Posted about 2 years ago
Hello, edbizichjr Congratulations on finishing this project. It's lovely and great on the whole! Just a little tip:
- You might want to use semantic tags like the
<main>
to wrap your code, instead ofdiv
. like
<main class="container"> <div class="card-grid"></div> </main>
You could also make use of
<section>
and/or<article>
semantic tags. This would help improve accessibility.I hope it will work. Happy coding.
0 - You might want to use semantic tags like the
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