Design comparison
Solution retrospective
Please check out my code and let me know how I can improve
Community feedback
- @correlucasPosted over 2 years ago
Hello Lajoc, congratulations for your solution!
I took a look on what you did in your code and I've few tips:
- Apply
max-width:350px;
inside the card container to limited the maximum width; - Apply flexbox to the body making the card align in the screen,
body { display: flex; align-items: center; justify-content: center; }
About accessibility issues, <img src=
images/illustration-hero.svg
alt=hero illustration
width=100%
> instead of put width: 100%, put the real value in pixels for the img height/width to avoid this errorI hope it helps you!
Marked as helpful0@f-lajocPosted over 2 years ago@correlucas thank you and I've applied max-width and display but it's still stretching out in the design comparison. I've sorted out the accessibility issues
0@correlucasPosted over 2 years ago@f-lajoc Take a look on my solution, https://www.frontendmentor.io/solutions/order-summary-component-pure-html-css-and-custom-active-hover-states-SJwF6N9Lc
There you can see how a build the html structure, maybe you did something different, applying a flex to a wrong container o something like.
Try to set max-width: 350px to the <div> that is holding all content, I think this will fix all. For the elements inside this div set the paddings/margins to make the card grow horinzotally.
0 - Apply
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