Design comparison
Solution retrospective
I have recently completed a project and would greatly appreciate any feedback you may have. I am eager to learn and improve, so I welcome constructive criticism or suggestions for enhancement. Your insights on any potential mistakes or areas for improvement would be invaluable in helping me grow and develop as a professional. Your feedback will not only benefit this project but also contribute to my future endeavors. Thank you in advance for taking the time to share your thoughts.
Community feedback
- @grace-snowPosted 9 months ago
Hi
The biggest problem I see here is that you've added a hover style to the
li
elements not the anchors. The whole block needs to be clickable, not just the text in the center of each list item.You also must not do this:
height: 100vh; width: 100vw;
Never limit the height of elements that contain text, including the body. This solution breaks on smaller screens especially in landscape orientation because of the height 100vh. Instead, change it to min-height.
The body is already full width. Don't use 100vw ever as that can only cause overflow (unwanted horizontal scroll) whenever a scrollbar is present for some users.
The card must not have a height or width. Use max width in rem and let the browser decide how tall the card needs to be based off the content inside.
Add some padding to the body or margin to the component so it can't hit screen edges.
Look up how to write alt text on images. There is a good post about this in the discord resources channel.
It's strange how youre using padding and margin at the moment. Maybe have a read of this and make sure you understand the differences / when to use each: https://fedmentor.dev/posts/padding-margin/
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