Single price grid component

Community feedback

• 

  Muhammad Waleed Ahmed•270

  @WDWaleedPosted over 1 year ago

  The overall layout looks good but you've done a major problem with the colors.

  The text isn't readable so try to change the colors as shown in the style guide. It will make the card look much better.

  Also the very first heading "Join our Commmunity" should have a larger font-size. You should write this inside of an h2 element because this is an important heading.

  To make the card look like a "card" use box-shadow property. Here is what I used:

  box-shadaow: 1px 3px 15px rgba(0, 0, 0, 0.2);
  

  0
• 

  _nehal💎•6,710

  @NehalSahu8055Posted over 1 year ago

  Hello Coder 👋.

  Congratulations on successfully completing the challenge! 🎉

  Few suggestions regarding design.

  ➨To properly center the container.

  • USING FLEXBOX

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

  • USING GRID

  body{
  min-height: 100vh;
  display: grid;
  place-items: center;
  }
  

  ➨ Give some width or more specific max-width to your card as it is get very large on larger screen.

  ➨ Use responsive units(rem, em, %) from next project. Explore respective use cases on google.

  link.

  ➨ You can use accessibility features like aria, sr-only, and title which are accessible to screen readers.

  I hope you find this helpful.

  Happy coding😄

  0

  ---

  

  Holo Olagoke•50

  @Olarra18Posted over 1 year ago

  @NehalSahu8055 Thanks for the feedback, I really appreciate it and I'm grateful. I will update my code file with your suggestion, once again thank you.

  1

  

  _nehal💎•6,710

  @NehalSahu8055Posted over 1 year ago

  @Olarra18

  Tip:

  • Generate new screenshot after making the necessary changes.

  0

  

  Holo Olagoke•50

  @Olarra18Posted over 1 year ago

  @NehalSahu8055 Thank you so much for the super amazing CSS tip you showed me, it makes my project look amazing.

  1