3 column preview card component using tailwind and flexbox

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted about 2 years ago

  Hello

  Here's some feedback

  • Make sure you give your component a max-width. Zoom out lots on your screen and you'll see the issue
  • Same on mobile - give it a smaller max-width so it stays closer to the design. It looks really wide on large mobiles at the moment
  • Width 70% on mobile is way too narrow. My phone is 320px wide and the side gutter on this is huge at the moment
  • Looks like border-radius is missing
  • Realistically, this component would sit on a web page with a h1 above it. You wouldn't ever three h1s on a page, so make these h2s
  • Make the attribution on this a footer element.

  That's all from me, this looks good!

  Marked as helpful

  1

  ---

  

  Numan Iftikhar•160

  @numan-iftikharPosted about 2 years ago

  @grace-snow Thanks for your suggestions. I'll definitely incorporate them ASAP.

  0

  

  Numan Iftikhar•160

  @numan-iftikharPosted about 2 years ago

  @grace-snow Hey, I've struggled making it look good on wide mobiles. I tried max width on individual cards but it didn't work. I also tried tailwind breakpoints but still didn't work. May be there's some issue with tailwind

  0

  

  T

  Grace•31,270

  @grace-snowPosted about 2 years ago

  @numan-iftikhar max width on the whole component, not individual cards.

  There won’t be any issue with tailwind, but maybe with the way you’re using it. I don’t use tailwind so wouldn’t know, but reading the docs gives answers on libraries like that

  0