3-column-preview-card

Community feedback

• 

  darryncodes•6,370

  @darryncodesPosted about 2 years ago

  Hi Ibrahim,

  Overall a really decent solution and responsive - well done!

  A few bits of feedback for your consideration:

  • add {cursor: pointer;} to your buttons
  • swap <div class="grid container"> to a <main>. Semantic html is really important for accessibility and it should clear your report.
  • look into max-width to control the width of your content in a responsive way, rather than using width with percentage values. This would help your design not to stretch across the viewport at larger screens too
  • I noticed at different viewports your buttons are not aligned. Also if the content in the <p> were different lengths in the design you'd come up against the same challenge. I created this codepen that uses flex:1 and justify-content: space-between as potential solutions

  I hope that all makes sense, any questions let me know.

  Happy coding!

  0