Design comparison
Community feedback
- @Kein-InternetPosted 4 months ago
It is good that you followed the design specs and your HTML semantics are very reasonable.
A few suggestions for your CSS code:
-
You can remove the
width: 100vw
and themargin: auto
you have already centered the card the flex stuff in your.container
class. -
For accessibilty reasons, it is necessary to always use
rem
instead ofpx
when adjusting the font-size. A visually impaired user might want to increase their deafult font-size in their settings and rem makes sure that the font size corresponds to thier change. Pixels does not do this making it an accessibilty concern. -
It is more safer to use
max-width
instead ofwidth
for your.container
class, using width can cause overflow of content on smaller screens (although testing your website, I don't see this problem). By using max-width, you can choose a the width you want your container to be, while also ensuring that it will shrink on smaller screens.
Keep it up!
0 -
- @Supa-Thobile2Posted 4 months ago
The project is structured properly. The code is easy to read and follow.
The project is not responsive to different screen sizes and could be improved by removing the additional scrolling. The CSS could be applied to fix the issue with overflowing elements.
The project is good and looks just like the design.
0
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