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

relative Units and display flex

@Naatikyere

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


This challenge was very interesting, I one point I thought I had it all. I faced a lot of challenges with the media query. If anyone can help, I would appreciate it.

Community feedback

@Call4julius

Posted

OBSERVATIONS:

The add to cart is not an image. It ought be a cta (call to action) button since clicking it will do an action.

To make your image responsive you should add img {display: block; max-width: 100%;}

on your .main you set a width of 40%, but no max-width. Adding a max-width or min-width will ensure the container does not grow or shrink beyond a certain point.

You didn't use the colors provided in the style guide.

using display: grid; on the .main container would have made it a lot easier for you.

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