Product preview card component with Tailwindcss

Community feedback

• 

  Hossam khalaf•230

  @hossam-khalafPosted about 2 years ago

  That's awesome, identical to the design! about the design comparison: I think you need to generate a new screenshot to sync with the last update to your GitHub repo, if you are on a free plan like myself, you have limited screenshots every month.

  1

  ---

  

  Mehdi•990

  @siavhnzPosted about 2 years ago

  @hossam-khalaf

  I give it a try I hope works.

  Thanks

  0

  

  Mehdi•990

  @siavhnzPosted about 2 years ago

  @hossam-khalaf

  NOOP, it doesn't :(

  0
• 

  Suleman•750

  @legion40216Posted about 2 years ago

  Good work Medhi, I was thinking on the reason why u choose gird over flex and what was the strategy behind it. I also too the gird approach after reading ur advice so just wanted to know, i get confused when to chose what.

  0

  ---

  

  Mehdi•990

  @siavhnzPosted about 2 years ago

  Hello Suleman, Thanks for the feedback

  In desktop mode, I wanted two columns of the same size; one for the picture and one for the card info. I didn't reach that by Flexbox. I tried a lot of properties with Flexbox to fix the picture size as the size of the info section, but I couldn't, so I decided to use gird with two fractions; it worked immediately.

  I think there isn't a correct method or approach. I use whatever works for me. I can't do everything perfectly at first, so I take it easy. After a while, our experience decides for us :)

  Happy coding

  1
• 

  Mehdi•990

  @siavhnzPosted about 2 years ago

  In my live site, everything is ok but in this DESIGN COMPARISON something goes wrong.

  any guess?

  0

  ---

  

  Suleman•750

  @legion40216Posted about 2 years ago

  @siavhnz maybe the page doesnt load fast enough for the screen shot to take a proper picture...

  1

  

  Suleman•750

  @legion40216Posted about 2 years ago

  @siavhnz As @Elaine mentioned from one of her comments if u untick the Optical-Size in google Font the issue of the font will be resolved and paste the link on your styles page... I hope this helps...

  1