Built Using ReactJS, CSS Modules

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, great work on this one. Desktop layout is fine just that the layout is bit wider and the box-shadow's color is not the same. The responsiveness could be better since right now at point 790px going down to mobile layout, the layout is being hidden thus creating a horizontal scrollbar. The mobile layout however looks great as well.

  Some suggestions would be:

  • The body does not need a display: grid since the primary placement(grid) should be only used in the 4 card container.
  • The h1 should be using a max-width with rem unit so that it will be consistent. Replace the width with the max-width.
  • p tag after the h1 should be using max-width as well instead of width and use rem.
  • Your usage of grid currently is not correct. Looking at the layout it place correct right, butyou usedtransform` to place it on the correct x-axis. Your grid should be using 3 column with 2 rows. Inspect the layout in html, hover on the container of the cards, you will see that its width is not correct with the cards, there are 2 columns but the cards are using 3 columns.

  So the proper way is that like what I said, 3 column with 2 row. The left and right card, should only be using translate-y to be adjusted on the correct position and the 2 middle card should not be using a transform since it will be place correctly on the gtr and gtc and the gap will make the spacing.

  • The 4 icons should be hidden so use alt="' on it and extra aria-hidden="true" attribute. All decorative images should be hidden at all times.

  Aside from those, great work again on this one.

  Marked as helpful

  0

  ---

  

  P

  Kevin Davis•280

  @webdev1kevPosted about 3 years ago

  @pikamart Thanks again!

  0