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

Adriel Murrayโ€ข 90

@AdrielMurray

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


Any thoughts? Where did I go wrong? What can I improve?

Community feedback

Vishal Biradarโ€ข 895

@vishalbrdr

Posted

set img height to 100%. set product-info height same as the product-image height. or don't specify a height for any, just set the height of the container and let flex-box take care of that.

Marked as helpful

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

@correlucas

Posted

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

For some reason your live site isn't available check if you've added the right link in the solutions panel and update it.

I've checked your code repository and I've some tips for your:

1.You've used main to wrap the container and thats good, you can also use <section> for each column instead of div for better semantic.

2.To wrap both image desktop and mobile with a single element, you can use <picture> this way you've all control over two images with a single css selector.

3.You've used h4 for the overtext perfum, this case is better and h2 heading.

Hope it helps and happy coding!

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