Product Preview Card using flexbox and a bit of media query

Community feedback

• 

  P

  Luqman (Luke)•180

  @luqmanx1998Posted 3 months ago

  Hello ! That's really good imo ! You mentioned having some issues with the size of the card, I assume you meant the proportions of each side of your card, that the card-details side is bigger than your image side? If that's the case, I looked into your code, and I think for your desktop responsive media query, you could try this maybe:

  .card { display: grid; grid-template-columns: 1fr 1fr; }

  And perhaps you may want to remove the gap in your .card class too, if you choose to try this , so it looks uniform ! Grid flows in rows by default, so no need for flex-direction: row with this method either ! Have a great day :D.

  1

  ---

  

  Lyna•260

  @lynaIFRPosted 3 months ago

  Thanks for the feedback, I'lltry using grid as you said. I thought of puting my card in a table, do you think it'sa good idea, Imean even if it works, is it a good thing to do? @luqmanx1998

  0

  

  P

  Luqman (Luke)•180

  @luqmanx1998Posted 3 months ago

  @lynaIFR

  Hey, I'm not so sure about putting your card in a table, I personally haven't had a chance to practice table layouts very much, so I can't quite answer this question. However, I do know that tables are typically used for collapsible or very 'tabled' content, I think a good example for when tables are used is maybe in the Recipe challenge, where they have many lines, or lists, so maybe you can check that out if you like !

  0

  

  Lyna•260

  @lynaIFRPosted 3 months ago

  You're right, tables shouldn'tbe used fir everything, i thought i could do it as a trick but it's not a good idea. Thanksfor your time, I'll keep working on it@luqmanx1998

  1