Skip to content
Submitted 29 days ago

Product card preview with flexbox

David Sibrian•140
@armson45
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I think I've improved the class naming and a little bit of structure.

What challenges did you encounter, and how did you overcome them?

On the right side of the card (pc view) I tried to separate the elements with:

  • grid: I had the problems of some rows being higher than others. I tried the grid-template-rows: max-content max-content 75px 50px (not the exact values) and run into some problems so I tried the next.
  • flexbox: I think that a gap will be fine :) but i think is not a good way.
  • margins: Tried putting margin-top in every element on the right side, kinda worked but I didn't like so I kept the gaps.
What specific areas of your project would you like help with?

I absolutely think that there is a better way to do what I did on the right side...I'll appreciate if you take a look on the code and tell me a way to improve it.

Also, to make the image borders look rounded I used overflow: hidden, also I don't know if that's a good way.

Thank you in advance! :)

Community feedback

  • KapteynUniverse•2,170
    @KapteynUniversePosted 29 days ago

    Hey, nice job.

    Since you used flex, try justify-content: space-between; for gap. A minor difference but will do better than eyeballing for spacing.

    @media (width >= 768px) {
    .card-product__info {
.
.
.
        justify-content: space-between;
        /* gap: 25px; */
.
.
.
    }
}

    You can also use a css reset for every project. Rest looks good

    Marked as helpful
    0

Please log in to post a comment

Log in with GitHub

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