Order Summary Card Component - Solution
Design comparison
Solution retrospective
Dear All,
This is my first try without actually getting help from others. I guess I have tried almost to recreate the desktop screen display. It would be great if you can suggest to me how to get this for my mobile screen as well (basically getting a responsive view).
For starters, I tried, and it just shows me a fixed block with elements hidden or cut, and I have no idea how to position the elements.
Community feedback
- @brodiewebdtPosted almost 3 years ago
The card sizes between desktop and mobile are not very different, so I wouldn't worry about that. It looks pretty good for your first solo attempt. There are a few things that you can change to make this work better. Take the picture element out of the html and add the image to the body CSS as a background-image. Remove the height and width from the body tag and add this code to the body CSS to center the card in the middle of the screen.
display: grid; place-items: center; height: 100vh;Remove the margin in the summary-card css, it isn't needed with the above code.Add a main tag around your summary-card div and change the attribution div to a footer and it will clear the accessibility warning. Download AXE DevTools and you can fix accessibility warnings while you are coding. https://www.deque.com/axe/devtools/
If I can help anymore just let me know.
1 - @aparajitdotbeePosted almost 3 years ago
Thanks, for the feedback, pal. Will reach out in case of anything!
0
Please log in to post a comment
Log in with GitHub
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