3-Column-Preview-Card-Component

Community feedback

• 

  Gediminas Makutenas•765

  @SenatriusPosted almost 2 years ago

  Hi there! Nice work on the project. Yes, in cases like this, grid is a good option. Got a couple suggestions below.

  • Grid template shorthand: a better way to write it when all columns are the same width is grid-template-columns: repeat(3, 1fr) which is the same as 1fr 1fr 1fr but now if you want to change 1fr to let's say 15rem, you only have to change it once, not 3 times. Not necessary here but good for the future.

  • Missing media queries: it seems you are missing media queries for smaller screens. Add @media screen and (max-width: [whatever width you want to change the styles at]) {} and add these two lines grid-template-rows: repeat(3, 1fr); grid-template-columns: 1fr

  • Responsive width: replacing width: 42rem with max-width: 42rem in the .card class will make the component responsive and shrink if it doesn't fit on the screen.

  Besides that, things look good to me. Keep it up :)

  Marked as helpful

  0

  ---

  

  0xev•120

  @0xevPosted almost 2 years ago

  @Senatrius thank you for your feedback!

  I wanted to create enough desktop designs first and then dive into mobile and I think it's time now :)

  1