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 card made with flexbox and preprocessor sass

Kamilโ€ข 120

@kamilp522

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


I've had a problem with adding border radius to my .card_container element. Any thoughts?

Community feedback

@themegazord

Posted

Hi Kamil, how are you?

Another thing I noticed, you inserted the mobile image in the desktop version.

Marked as helpful

1

Kamilโ€ข 120

@kamilp522

Posted

@themegazord Done, thanks for the tip!

0
Lucas ๐Ÿ‘พโ€ข 104,420

@correlucas

Posted

๐Ÿ‘พHello Kamil, congratulations for your solution!

I saw your live site and the component border-radius are just perfect, no issues there. What was the problem?

The only issue I see is that the image isn't resizing with the container with the mobile version. You can fix that using the following properties:

img {
display: block; 
max-width: 100%;
object-fit: cover; 
}

Hope it helps and happy coding!

Marked as helpful

0

Kamilโ€ข 120

@kamilp522

Posted

@correlucas Hi Lucas! Thanks for the feedback and the tip on the img element! I actually couldn't add border radius to the card container so I've added it to the image wrapper and descriptions container separately. Otherwise it couldn't work, and looked like this: https://postimg.cc/mhcDTQrP . It kinda works but content goes over the border.

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