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 using HTML and CSS

@Manisha3196

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


What are you most proud of, and what would you do differently next time?

Maybe try to use less code.

What challenges did you encounter, and how did you overcome them?

I didn't encounter any special challenges just the small one adjusting all in one container.I used grid for it and solved.

Community feedback

MarLieDev 120

@marliedev

Posted

First Look on Desktop looks fine. But when inspecting in Detail there are some inconstistencies.

  • The image extends slightly beyond the edge of the card and has rounded edges on the right side
  • The font-family for price is not correct.

When changing to mobile view there are even more "problem".

  • The Image swaps to early.
  • The title (h1) is much to big for mobile devices
  • At some point (at around 470px) the button moves outside the box.

Improvements:

  • check your result in detail and test it extensively! This is a crucial skill!
  • flexbox is best for this kind of layout. At least for the mobile design.
  • have a look at grid in detail. The use of grid-template-rows with percentage values is the reason why your mobile layout is "shot"
  • use lower case names in css and html and usekebab-case style
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