Order Summary Card Challenge

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  Hello Lajoc, congratulations for your solution!

  I took a look on what you did in your code and I've few tips:

  • Apply max-width:350px; inside the card container to limited the maximum width;
  • Apply flexbox to the body making the card align in the screen,

  body { display: flex; align-items: center; justify-content: center; }

  About accessibility issues, <img src=images/illustration-hero.svg alt=hero illustration width=100%> instead of put width: 100%, put the real value in pixels for the img height/width to avoid this error

  I hope it helps you!

  Marked as helpful

  0

  ---

  

  Lajoc•40

  @f-lajocPosted over 2 years ago

  @correlucas thank you and I've applied max-width and display but it's still stretching out in the design comparison. I've sorted out the accessibility issues

  0

  

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  @f-lajoc Take a look on my solution, https://www.frontendmentor.io/solutions/order-summary-component-pure-html-css-and-custom-active-hover-states-SJwF6N9Lc

  There you can see how a build the html structure, maybe you did something different, applying a flex to a wrong container o something like.

  Try to set max-width: 350px to the <div> that is holding all content, I think this will fix all. For the elements inside this div set the paddings/margins to make the card grow horinzotally.

  0