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 preview component with CSS and HTML

Galeanas93โ€ข 60

@Galeanas93

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


Feedback is greatly appreciated

Community feedback

Lucas ๐Ÿ‘พโ€ข 104,420

@correlucas

Posted

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

You've done pretty much everything here, the container is super flexible, I like it.

I've two tips for your:

1.Note that the container image isn't scaling properly and lose its proportion a little before the media query. Ins't a big deal, but is visible.

2.The pricing section is getting cropped when the mobile section starts to scale down and the price gets covered by the container bounds, this is due the overflow: hidden added to the container. You can fix that creating a media query that changes the flex-direction: column; when the container gets 300px. See the example below:

@media (max-width: 300px) {
.price {
display: flex;
flex-direction: column;}

See if works and tell me then, happy coding Galeana!

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