Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Order-Summary-Component Solution using CSS

@20-ank-02

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Adriano 34,090

@AdrianoEscarabote

Posted

Hello everything is fine?

I really liked the result of your project, but I have some tips that I think you will like:

I saw that the background is stretching and losing height according to the screen resolution:

We can arrange it like this: background-size: 100% 50vmin;

I also noticed that the layout is breaking too soon, to improve the responsiveness of the project I added this media query:

@media (max-width:500px) { body { padding: 0 10px; } .card { width: 100%; } }

The rest you adjust with flex-wrap!

Hope it helps... 👍

Marked as helpful

1

@20-ank-02

Posted

@AdrianoEscarabote Thanks for feedback, I'll incorporate these into my project.

1

Please log in to post a comment

Log in with GitHub
Discord logo

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