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

mycrochip 460

@mycrochip

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


I was so proud to be using a grid layout within a flex layout. Though, I could have gone with just grid; I don't want to pick sides yet in the never-ending grid/flex war.

Community feedback

@Jorgus1710

Posted

Hey, very nice card! I noticed however that the mobile view isn't optimized. Perhaps a mobile first approach will be a good habit when doing projects, it certainly has been helping me.

I think it's great you used the grid approach to lay out the items in the middle of the card. I just did the challenge myself and decided to use flexbox for that section. If your curious how to get the same result using flexbox, I did it as follows to your "grid-columns":

display: flex;
align-items: center;
justify-content: space-between;

Setting the display to flex aligns the items into rows by default. After that, to move the items within the container as per design image I simply played with "margin-left" values of the items in the container to offset them however I wanted. I'll be referencing your approach to grid when the time comes for me to begin using it, thanks and keep up the good work!

Marked as helpful

0

mycrochip 460

@mycrochip

Posted

@Jorgus1710 Thank you. This was very thoughtful.

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