Design comparison
Solution retrospective
It was a really simple challenge so I try using several @media selectors to improve accessibility. Any suggestions are welcome.
Fue un reto bastante simple asique intente usar varios selectores de @media para mejorar la accesibilidad. Cualquier sugerencia sera escuchada.
Community feedback
- @ofthewildfirePosted over 1 year ago
Hey! First off, fantastic job, it looks amazing, I just have some small changes I think might be helpful.
1 - Your music icon image is stretched, its in a flex-container so we can solve that by adding a
align-items: center
to align the items vertically. This distributes the whitespace and makes it nice and centered.plan-container { width: 100%; height: 20%; display: flex; flex-direction: row; align-items: center; padding: 2vh 3vw; }
2: Within your price-plan container you used a span and a paragraph and that is fine, totally, however, a paragraph has default margin and that default margin is causing a lot of space above it and making it look way too wide from the span. This can easily be fixed by removing the top/bottom margin on the paragraph element.
.price-container > p { color: hsl(224, 23%, 55%); margin: 0; }
-- and alternatively, you could also have used a ul/li to create this and it would have taken care of itself, seeing as
<li> ... </li>
are in-line and the flex-container would have nicely spaced all components out, but that is just personal opinion really. You did aweome whichever method you prefer. --3: Your button and anchor tag hover states are missing the
cursor: pointer
to give it that micky-mouse hand on hover like your "Cancel order" element has. So addingcursor: pointer
would just be itYou did a really great job and I hope these are helpful additions. :)
Happy Coding ~ Kaycee.
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