Single price grid component using grid

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hello, @Kathund! 👋

  Congratulations on finishing this challenge! 👏

  Some suggestions from me.

  • I notice that you made four columns for the grid layout. Why don't just make it two columns? I think it will work well because the second card and the third card have the same width.
  • I also notice that the card is not responsive. I would recommend trying to make it responsive. 😉
  • Avoid using br elements for presentational purposes. Read what MDN documentation says about it. So, I would recommend making the p inside the three section as a list element instead.

  I hope this helps! Happy coding! 😁

  0
• 

  Vani•160

  @VANIMEHTAPosted over 2 years ago

  This looks fine, just try to reduce the height of your main container. Also instead of px you can give height and width in vh and vw.

  0

  ---

  

  kath•130

  @KathundPosted over 2 years ago

  @VANIMEHTA could you explain how vh and vw works?

  0

  

  Vani•160

  @VANIMEHTAPosted over 2 years ago

  @Kathund see basically vh means view height and vw is view port. They are basically height and width in % values of the device user is using. for eg: if I define height: 80vh; then this means that your container will take 80%of the device height user is using. Therefore the height will adjust itself based upon user's screen automatically. I hope its clear!

  0

  

  kath•130

  @KathundPosted over 2 years ago

  @VANIMEHTA thanks I might use it in some of my upcoming project

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @VANIMEHTA I would not recommend setting any height on the card element. Let the elements inside the card control its height. Most of the time you want to let the elements inside it control it because if the content length is changed then you have to keep changing the height of it.

  @Kathund Also, I suggest removing the width as well. Instead, set a max-width. This way, the card is allowed to shrink if needed. 😉

  0