Responsive Order summary component using Flexbox

Community feedback

• 

  P

  Kent O'Sullivan•1,870

  @12KentosPosted over 2 years ago

  Hey @KunalNimsatkar great job on completing the challenge! Code is looking good!

  As for getting it to be centered on the page, something you could do, is to give the body the following properties.

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

  This will keep it centered on the page nicely and make it responsive. This way you can get rid of making the position absolute on the container and having to move it around that way. Hope that helps, and keep up the good work!

  P.S. Your link to your github repo is broken.

  Marked as helpful

  0

  ---

  

  Kunal Nimsatkar•50

  @KunalNimsatkarPosted over 2 years ago

  Hey @12Kentos Thank You For Your Suggestion for Inspiring Me. I will Work on it!

  0
• 

  Kunal Nimsatkar•50

  @KunalNimsatkarPosted over 2 years ago

  Hey @Harshita Jain Thank you for your Suggestion. I Will Work on it !

  0
• 

  Harshita Jain•380

  @Harshi786Posted over 2 years ago

  Hey @KunalNimsatkar!

  Congrats on completing your first challenge.

  Your code looks good but here are some tips to make it perfect:

  • You can add a nice little shadow effect.
    1. For card, add box-shadow .container {box-shadow: 0 40px 40px -20px rgba(13, 48, 189,0.15);}

  2. For Payment button, add box-shadow. a.proceedBtn { box-shadow: 0px 10px 20px hsl(245, 75%, 52%, 0.5);}

  • Some accessibility issues that need to be fixed.

  1. You need to wrap the whole code in <main> tag. For example use <main class="container"> in place of <div class="container">. For details read this

  2. Heading levels should only increase by one : Headings should be in order. Use <h1> Order Summary </h1> . After using <h1> then use <h2> , <h3> for better coding. For details read

  3. Always call image with alt attribute. <img src="images/illustration-hero.svg" alt="illustration-hero">.

  Hope this helps :)

  0