3-column-preview-card-component-main using HTML and CSS

Community feedback

• 

  Agata Liberska•3,995

  @AgataLiberskaPosted almost 3 years ago

  Hi Sai, nice work! A few quick changes could polish it up:

  • Double check your media query in the browser, 600px is not quite enough to fit the three parts next to each other
  • It would be a good idea to put all your cards in a container (and don't forget your landmarks! :)) and set a max-width to that container, so the content doesn't stretch across the whole screen
  • You can also then set your display: grid on that container and make sure that the value of grid-template-columns is correct (it should be repeat(3,1fr). Then you could get rid of the grid-columns property on the individual cards (they will each take one column by default).
  • You could also move the border-radius property on to that container and not have to repeat it (although you may need to hide the overflow for the radius to show up)
  • The buttons could use some hover styles to show the users that they're interactive elements.

  Hope this helps, happy coding! :)

  Marked as helpful

  0