Single Price Grid Component

Community feedback

• 

  Hyron•5,870

  @hyrongennikePosted about 2 years ago

  Hi

  Congrats on completing the challenge

  Just a few suggestion to improve the overall design.

  1. To center the card vertically and horizontally add the following:

  body {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
  }
  

  2. I'm not sure why, but it seems you're completing stripping the CSS for device above 1500px?

  3. On mobile you can set the width of the card to 90% so that it's not on the edge of the screen.

  .main {
      width: 90%;
      display: flex;
      flex-direction: column;
  }
  

  4. below is a link to a website with elegant box shadows just click on the one you want and page it in you CSS rule where you want the box shadow. https://getcssscan.com/css-box-shadow-examples

  Marked as helpful

  1

  ---

  

  MIHIR KUMAR•70

  @MIHI-botPosted about 2 years ago

  Hello @hyrongennike, thank you so much for the overall advice. I really had to know this before creating any project. One thing I also don't know about stripping all CSS for devices above 1500px. Projects, where media query is for below 1500px, were created a long time ago and even I don't know why I did so! From now I won't repeat this again.

  And the CSS shadow link is very helpful. Thank you for that as well!

  1