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 with simple HTML and CSS

Ornelle 70

@Blackysynch

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


Hi all, this is my solution to the order summary component challenge.

I managed to use media queries to specify display for small and large screens.

Any and all feedbacks is welcomed...

Community feedback

@eddybpro

Posted

Hi, Blackysynch

Congratulation on finishing this challenge, I hope it was fun.

Here are some suggestions that might improve the code:

  • CSS code:
@media only screen and (min-width: 376px)
.card {
background-color: white;
/* remove this line: height: 80%; */
/*  remove this line: min-width: 30%; */
/*update this*/
max-width: 25rem;
}
.plan{
/*remove this line: justify-content: space-between;*/
/*add this line*/
background-color:/*your color*/
}

Tip

Remember to start using relative values rem em instead of absolute values px.

That's it HAPPY CODING

Marked as helpful

0

Ornelle 70

@Blackysynch

Posted

Thanks @eddybpro

this was very helpful.

Do you have recommendations for resources on css units?

0

@eddybpro

Posted

Hello, @Blackysynch

I'm happy that you find my suggestions useful.

For the CSS units here are some resources:

GOOD LUCK IN YOUR JOURNEY

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