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 with basics

CRKNO 50

@CriKno

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


Please tell me how I can improve, whatever it is fine!

Community feedback

Hikmah 1,070

@Hikmahx

Posted

Hi @CriKno. Great work! I have some feedbacks that may help improve this project:

  • For the card, instead of setting the width to 336px and then 579px on tablet, I think it is better to replace it with max width and set the width to 100%:
.card {
    width: 100%;
    max-width: 336px;
}

@media (min-width: 640px){
    .card {
        max-width: 579px;
    }
}

This is will make the card more responsive. You may add a little padding to the main tag to give some spacing at the side of the card:

main {
    padding: 16px;
}

I hope this helps

Marked as helpful

1

CRKNO 50

@CriKno

Posted

@Hikmahx Hello! thaks for take a moment to check my code. I tried change the width for max-width and it's work. I think maybe i should put a min-width so that the card is not deformed so much. I'm rigth? (sorry for my english, I am lerning). And again, than you for your feedback!

0
Hikmah 1,070

@Hikmahx

Posted

@CriKno Sure! if that makes the code better

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