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

@kriShnanshu-saini

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Any suggestion are most welcomed

Community feedback

Lucas 👾 104,420

@correlucas

Posted

👾Hello @kriShnanshu-saini, congratulations on your first solution!

Nice code and nice solution! You did a good job here putting everything together. I’ve some suggestions for you:

Add the color blue as a background to make constrat with the image.

Make your solution SUPER RESPONSIVE, creating a media query to save space in the pricing section to make each information in a different row. Here’s the code for this media query.

@media (max-width: 350px) {
.plan {
    margin: 0 2.5em 2em;
    padding: 1em;
    background-color: var(--very-pale-blue);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 1em;
    flex-direction: column;
}
}

✌️ I hope this helps you and happy coding!

0

@kriShnanshu-saini

Posted

@correlucas Hey! i didn’t knew that we had to make all projects responsive, at first i tried to make it responsive but then i thought might be it is not needed so i left it. I’ll keep it mind from next onwards. Thanks for the feedback

0

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