Not Found
Not Found
Not Found
Your session has expired please log in again.
Your session has expired please log in again.
Not Found
Your session has expired please log in again.
Your session has expired please log in again.
Your session has expired please log in again.
Your session has expired please log in again.
Your session has expired please log in again.
Your session has expired please log in again.
Not Found
Your session has expired please log in again.
Your session has expired please log in again.
Not Found
Your session has expired please log in again.
Your session has expired please log in again.
Not Found
Your session has expired please log in again.

Submitted

Order-summary-desktop first

Jeffrey 40

@jgrospe92

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 everyone,

I would like to hear some feedback, any suggestions that will help me to improve in coding are highly encouraged. What I have trouble with: I started coding the desktop version first, I struggle with the mobile version. I can't get the small screen to work perfectly. Please take a look at my code and tell me where did I do wrong.

Best regards Jeff

Community feedback

P
Hamza H. 460

@hhamza1

Posted

First of all, good job on the delivery.

Although you started with a desktop approach, you could still have a couple of things to set and you won't have to do much on the mobile view. Setting the display flex on the body would have made your work much easier, also you could have set a max-width to the card, that would have helped also with the responsiveness, box shadow should be fixed, bg-color and pattern could be also fixed.

You might check my solution for more details : https://www.frontendmentor.io/solutions/order-summary-card-component-with-flex-MHX37axfl

My approach was mobile-first view. It's much easier to expand to other screen sizes afterwards, not much CSS to write.

Keep up the good work

Marked as helpful

1
Gautam 105

@Gautamji

Posted

This is how I did it. https://github.com/Gautamji/frontendmentor/tree/master/order-summary-component-main

and my approach while making it. I live streamed it :D https://youtu.be/24ImgsJfLAY?t=8269

Marked as helpful

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