Design comparison
SolutionDesign
Solution retrospective
a lot of learning in its project.
Community feedback
- @denieldenPosted over 2 years ago
Hey Faizan, congratulations on completing the challenge! You did a great job 😉
Let me give you some little tips for optimizing your code:
- add
main
tag and wrap the card for improve the Accessibility - remove
min-height
frommain
class and setwidth: 20rem
- remove
min-height and width
frommain-one
class because they are unnecessary - remove all
margin
frommain
class - use flexbox to the body to center the card. Read here -> best flex guide
- after, add
min-height: 100vh
to body because Flexbox aligns child items to the size of the parent container - instead of using
px
use relative units of measurement likerem
-> read here
Hope this help! Happy coding 😁
Marked as helpful1 - add
- @remtainePosted over 2 years ago
Looks nice, especially at the 375 and 1440px breakpoints specified. However, some improvement can be done at the other screen sizes in between. Increasing your media query breakpoint from 480px would be helpful. Right now most screen-sizes between 480px and around 1000px don't look good. Did you specify a large margin? That might also be the problem
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