Order Summary Card (HTML and CSS)

Solution retrospective
Hi guys, for some reason, when the screen gets too small, the text doesn't wrap, and it just gets cut off. Any suggestions? It might be something with the margin, I'm just not sure what the best way is to do this. Thanks!
Please log in to post a comment
Log in with GitHubCommunity feedback
- @vanzasetia
Hello, Adam! 👋
Congratulations on finishing this challenge! 🎉
I have some feedback on this solution:
- Accessibility
- Good job on leaving the
alt=""
empty for all decorative images! 👍 - Add
:hover
effect for all interactive elements. It's much easier to identify any interactive elements if there are hover effects on them. - The attribution should be lived inside the
footer
.
- Good job on leaving the
<body> <main> page content goes here... </main> <footer class="attribution"> attribution links goes here... </footer> </body>
- Don't use
footer
for the card content since it is not a full webpage. This is one chunk of content that all belong together and in a real website would sit with other content. Thefooter
would be the attribution. - Create a custom
:focus-visible
styling to any interactive elements (button
, links,input
,textarea
). This will make the users can navigate this website using keyboard (by usingTab
key) easily. - There should not be text in
span
anddiv
alone; instead wrap the text with a meaningful element. - Styling
- To make the card perfectly in the middle of the page, you can make the
body
element as a flexbox container and remove themargin
from the.card
element.
- To make the card perfectly in the middle of the page, you can make the
/** * 1. Make the card vertically center and * allow the body element to grow if needed */ body { display: flex; align-items: center; justify-content: center; min-height: 100vh; /* 1 */ }
- Add
padding
to thebody
element to prevent the card from touching the browser edges or simply the card if filling the entire screen, on mobile view. - Best Practice (Recommended)
- Remove the commented code. If another developer (it can be you in the future) wants to improve this solution, he/she might get confused about whether or not the commented code should be used or deleted.
- Always use classes to reference all the elements that you want to style. Using
id
is going to make your stylesheet have high specificity (hard to maintain).
That's it! Hope you find this useful! 😁
Marked as helpful - Accessibility
- @zeerobit
Good work completing this challenge.. The card size is too big for mobile view, add a max-width in your media query to make it smaller .
Join 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