Order summary component with flexbox CSS

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  Replace<div class="container">with the main tag and the first <p> with <h1> to fix the accessibility issues. for more on semantic html visit https://web.dev/learn/html/semantic-html/

  Change the value of the background-size to contain. if you want .container to act as the body and center .card in .container, give add width of 100%, justify-content: center align-items: center and margin: 0 auto to .container

  Give .body-card-payment button a width of 100% and a padding top and bottom values. you forgot to give it a box-shadow as it was in the design.

  For a responsive content , replace the width in card with max-width. In the media query change only the background image of the body.

  Use rem or em as unit for the padding, margin, width and preferably rem for the font-size for more on CSS units watch this https://youtu.be/N5wpD9Ov_To

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  1
• 

  Blerim•270

  @approved4mePosted almost 2 years ago

  Nice work. My suggestion is that you should try to add some landmarks such as "main", "article" & "footer" instead of always using just "div". This helps to separate the elements and increases the accessibility.

  For the layout, please try adding some padding to the "body-card-pricing"

  Keep it up 👍

  Marked as helpful

  1
• 

  Nikola D•1,510

  @NikolaD93Posted almost 2 years ago

  Hello there! 👋

  Congrats for completing the challenge! 🙌

  1.About your question on when to use Flex or Grid. Well, it is optional most of the time, so you can decide which one to use. Also it depends on the type of the project you want to make. Make sure to get really good in both of them and just choose on your own.

  Hope this was helpful for you, if it was mark it as helpful 🙏

  Have a nice one! 🎉✌

  0