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 card solution with Bootstrap

@Chriscaracach

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


Every comment is welcome. Some troubles with button's box shadow. Thanks. Happy coding for everyone.

Community feedback

darryncodes 6,430

@darryncodes

Posted

Hi Chris,

Good solution, nice work.

Three minor points from me:

  • i'd remove 'right' and 'top' from your body background styles and add background-size: 100% auto; the image goes a little awry on large desktop screens
  • you could centre your design responsively in the viewport with display: flex; justify-content: center; align-items: center; min-height: 100vh; on your body
  • this is a useful simple show generator and this one is amazing they might make your life easier

All the best 🤙

Marked as helpful

0

@Chriscaracach

Posted

@darryncodes Thanks! I've used that shadow generators, but somehow didn't worked in that <button>. And I've forgot the "min-height" in the flex (I knew that something was missing). Thanks again! My next time will be better.

0
Kaspars 60

@kliimish

Posted

Hey! Nice job there. Some tips for css you should probabbly use less id selectors since they should be unique, so that means that the styles there could not be reused later. My guess is that this was a try to rewrite bootstraps css? Anyway in the long term classes are reausable for more than one time, so keep in mind to use them more often than # selectors. If the challange would be bigger, can you imagine yourself writing an id for every single element and then styling them?

But a cookie earned!

Marked as helpful

0

@Chriscaracach

Posted

@kliimish Thanks! Great tips. Certainly I've to work in doing my code a little bit easier to read (and write). Thanks again!

0

@Chriscaracach

Posted

@kliimish Thanks! Great tips. Certainly I've to work in doing my code a little bit easier to read (and write). Thanks again!

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