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 component

Mateogr03 310

@Mateogr03

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

P
Micha Huhn 220

@MichaHuhn

Posted

Your mobile view looks really good, well done.

There is a nice technique how to create equal columns. You can put the following code on the card component:

display: grid;
grid-template-columns: 1fr 1fr;

Currently, the button text is squashed. That can be fixed by removing to padding left and right. After that, width: 100% can be applied, so the button stretches from left to right.

I hope that's a bit useful.

Marked as helpful

0

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