Responsive 3 card component made using grid layout

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Layout in desktop looks great, the responsive state is different from other where you wrap the other cards in another row, but it is fine, but maybe you could use justify-content: center so that the card will be centered if it is on another row. The mobile layout looks fine as well, it just have some gaps between each card.

  Some suggestions would be:

  • Always have a main element on a webpage. The .grid selector on this one could have used main instead of div.
  • Also, the padding used on the .grid could just be used inside the body tag, this way, it won't create any extra height for the card.
  • On the grid selector as well, you should remove the margin property, as this creates extra dimension for the card. By doing this, the card won't be centered, that is why on the body tag, add justify-content: center.
  • Avoid using multiple h1 on a webpage, only use at least 1 h1 per page.
  • Since h1 is needed for every webpage, on this one, since there is no visual text that could be a h1, it would be a "screen-reader" only text, this only means that, the text are only visible for users who are using screen-readers but no visible for sighted users. Take a look at Grace's solution on this challenge, inspect the layout and see the usage of the h1 as well as the css that she used, copy that because you will use that a lot.

  Aside from those, really great job on this one.

  0