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 Component Main

tucecifci 150

@tucecifci

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

CHarvey820 190

@CHarvey820

Posted

Your desktop version looks good! If you want to get closer to the design, I would suggest turning the Gabrielle Essence Eau De Parfum text into an h1 and increasing the font size.

The content on the mobile layout looks like it spills over outside of its container, changing to a max-width property would help combat that issue.

.chanel .content {
    max-width: 100%;
  }

Hardcoding the height of your .chanel to 450px causes your content to spill out from the bottom on small screens, since the content needs more space to grow vertically. If you change it to height: auto; the layout will adjust itself.

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