Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Product Preview Card using flexbox and a bit of media query

Lyna 260

@lynaIFR

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What specific areas of your project would you like help with?

I found some difficulty with the size of the card, if anyone has suggestions, please share. If there is something that could be done better, I'll be happy to have your opinion on it.

Community feedback

@luqmanx1998

Posted

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

@lynaIFR

Posted

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

@luqmanx1998

Posted

@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

@lynaIFR

Posted

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

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord