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 Card Channel

@misaeljoelp

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


Try to use grid but still need to reaffirm the knowledge, just use flexbox

Community feedback

_nehal💎 6,710

@NehalSahu8055

Posted

Hello Coder 👋.

Congratulations on successfully completing the challenge! 🎉

Few suggestions regarding design.

  • Add min-height:100vh to the .card to properly center it.

  • It would be better if you use source media for switching to screen sizes(mobile or desktop) for image.

<picture>
<source media="(min-width:800px)" srcset="yourimage.jpg">
<img src="yourimage.jpg" alt="description">
</picture>
  • Use Semantics for the proper design of your code.
<body>
<main>... main content goes here ...</main>
<footer>...</footer>
</body>
  • For non-decorative images give meaningful and descriptive alt like alt= "Gabrielle Chanel Perfume bottle surrounded by leaves.".

  • Use responsive units(rem, em, %) from next project. Explore respective use cases on google.

  • Replace width with max-width to make your card more responsive.

I hope you find this helpful.

Happy coding😄

Marked as helpful

0

@misaeljoelp

Posted

@NehalSahu8055 Thanks for taking the time to provide feedback. Your observations have been very useful.

1

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