Design comparison
Solution retrospective
Hi everyone,
This is my Order Summary Component. I don't think that there was something that I find difficult in making the component, but if there's something that you see wrong on how I approach the challenge feel free to comment it out. 😁
Community feedback
- @correlucasPosted about 2 years ago
👾Hello @andcare, Congratulations on completing this challenge!
Amazing solution! I’ve just opened the solution’s live site and I liked the job you’ve done a lot. I’ve some suggestions for you:
Add
background-size: contain
and remove thebackground-position
to make the background display the svg image full width and get centered with the container.body { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; text-rendering: optimizeSpeed; line-height: 1.5; font-family: var(--primary-font-family); font-size: var(--font-size-400); background: url(images/pattern-background-desktop.svg); background-color: var(--primary-color-200); /* background-position: center; */ background-repeat: no-repeat; background-size: contain; }
✌️ I hope this helps you and happy coding!
1@andcarePosted about 2 years ago@correlucas
Hi!
Thank you so much for the suggestion. That's why I'm it feels a bit off whenever I look at the background of the project. I'll take note on this for the next challenge. 😁
0 - @neilk17Posted about 2 years ago
Hi Jav,
Great job with completing this challenge and at making it responsive
If you don't mind, here's some small improvements you can make:
Accessibility issues:
<html lang="en">
just ensure that all of the content is indented within this tag.Responsive Design: I think you have done this part perfectly
Overall this is great and good luck for your other challenges.
1
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