Design comparison
SolutionDesign
Solution retrospective
Hi all, please take a look on my Order summary component project completed , feel more then welcome to leave comment or suggestion )
Community feedback
- @MelvinAguilarPosted about 1 year ago
Hello there ๐. Good job on completing the challenge !
I have some suggestions about your code that might interest you.
- Setting the width of the component with a percentage or a viewport unit will behave strangely on mobile devices or large screens. You should use a max-width of
400px
or25rem
to make sure that the component will have a maximum width of400px
on any device, also remove thewidth
property with a percentage value.
- The music icon and the hero-image are for decoration purposes only, so they could be hidden from screen readers by leaving its alt attribute empty.
- In this challenge, it's preferable to represent the "change" element as a button rather than an anchor tag. Buttons are designed for action initiation, and in this case, the action involves altering the order's plan. This makes a button a more suitable choice than an anchor tag typically used for linking.
I hope you find it useful! ๐
Happy coding!
Marked as helpful0@pbgo2Posted about 1 year agohi @MelvinAguilar Thank you so much for such tips) really helping, Have you good day!
1 - Setting the width of the component with a percentage or a viewport unit will behave strangely on mobile devices or large screens. You should use a max-width of
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