Submitted 3 months ago

Order Summary Card | Frontend Mentor Challenge

neeta Purohit•160

@neetaPurohit

A solution to the Order summary component challenge

Preview Code

Solution retrospective

What are you most proud of, and what would you do differently next time?

Most proud of: The clean UI and responsive layout I built from scratch. Next time: I'd double-check all image paths before deployment to avoid display issues.

What challenges did you encounter, and how did you overcome them?

Challenge: Images weren’t showing after deployment. Solution: I corrected the image paths by using ./ instead of / which fixed the issue.

What specific areas of your project would you like help with?

I need feedback on my layout and styling—specifically how to improve responsiveness and alignment of elements in my order summary card.

Code

Please log in to post a comment

Community feedback

Leyanis Díaz•220
@LeyaDiaz
Posted 3 months ago
You did a great job with your code! To improve it further, try using more semantic HTML elements—for example, replace generic containers with, , or where appropriate to give your markup clearer meaning and improve accessibility. Also, simplify your CSS by grouping repeated styles and using shorthand properties, which will make your code cleaner and easier to maintain. For instance, instead of separately setting margin-top and margin-bottom, use margin: 1rem 0; to apply vertical margins at once. Lastly, make sure your layout is fully responsive by using relative units like % or vw and applying media queries to adjust styles on different screen sizes. I hope this helps!
Marked as helpful
Harsh Kumar•5,820
@thisisharsh7
Posted 3 months ago
Awesome job on the clean UI and well-organized layout! The design feels polished, and your use of Flexbox in elements like .plan-box works well.

Here are a few suggestions to improve your layout and responsiveness:
1. Centering the Card: Instead of using position: absolute with top: 55%, consider applying Flexbox on the body or a wrapper:
```
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height:100vh;
}
```
1. Add max-width to .subtitle for better readability on larger screens and increase padding around the .text-content.
2. Semantic HTML: Wrapping the card inside a <main> or adding <section>s would improve semantic structure and accessibility.
Overall, solid work! Just a few tweaks and your project will be fully polished across devices.
Marked as helpful

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