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

Responsive First

Abdelilah 180

@abdeldevprojects

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


if you have any feedback or suggestions please write a comment i will read all

Community feedback

Hyron 5,870

@hyrongennike

Posted

Hi @abdeldevprojects,

Congrats on finishing another challenge below are just a few improvements you can make. To get the columns to be equal you can use the below code on the container.

    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 0 auto;
}```

then just add `object-fit: cover` to the image on the left so that it doesn't appear stretched. You can also remove the max-width from the product title and just increase the font size and also increase the padding around the content on the right.

Marked as helpful

0

Abdelilah 180

@abdeldevprojects

Posted

@hyrongennike Thank you so much for your feedback <3

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