Frontend Mentor | Product Preview Card Component coding challenge solution

Community feedback

@rmartin93

Posted about 1 year ago

Consider removing the image from the image div and adding the following CSS

.image {
background-image: url(images/image-product-desktop.jpg);
width: 250px;
background-size: cover;
}

This will ensure that the image takes up the full height of the div.

If you ever run into issues with border-radius and background-image, just use a overflow: auto.

Happy coding!

Marked as helpful

Belly• 300

@Belly606

Posted about 1 year ago

thank you bro I tried it before and it didn't work but it works now 😅 Thank You So Much For Helping@rmartin93

Tushar Biswas• 4,080

@itush

Posted about 1 year ago

Congratulations on completing the challenge! 🎉

In my projects, I try to use at least one main element for a page (entire content goes into the main), and avoid divs as much as possible and use section and article element wherever I can.

<body>
<main>
All content 
</main>
</body>

Feel free to checkout my product preview project code and notice how I handle responsiveness with mobile and desktop product images.
I remember when I started out, I made countless mistakes and spent long hours searching for solutions. But hey, you don't need to go through the same struggles! 🙌 To help you shorten the learning curve, I recommend going through the following articles. They contain valuable insights that can make your journey smoother:

📚🔍 12 important CSS topics where I discuss about css position, z-index, box-model, flexbox, grid, media queries, mobile-first workflow, best practices etc. in a simple way.

📚🔍 11 important HTML topics

I hope you find these resources helpful in your coding adventures! 🤞

I'm eagerly looking forward to seeing the amazing projects you'll create in the future! 🚀💻

Keep up the fantastic work and happy hacking! 💪✨

Marked as helpful

Belly• 300

@Belly606

Posted about 1 year ago

wow man I didn't think of using the semantic elements in these challenges I mean I use them one I built Project but I ddint think of them this way one I solve these challenges thanks for advice and for the resources its so helpful and simple to understand them I bookmarked them in my browser 💪@itush

Tushar Biswas• 4,080

@itush

Posted about 1 year ago

@Belly606 You're most welcome! 😊🙌 I'm thrilled to hear that my advice and resources have been helpful to you.

📚🔍 It's great to know that you found them easy to understand and even bookmarked them! 📌🌟

Product Preview Card Component

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community