Skip to content
Submitted over 1 year ago

Product Preview Card Component

Bellyā€¢300
@Belly606
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I've Found To Change The HTML Image In Different Media So I've Used One Image ( Desktop Image ) And Change The Dimensions. So I will Be Happy If Anyone Share With Me Better Method Or Any Advice to improve My Code Happ CodingāœØ

Community feedback

  • Ryan Martinā€¢240
    @rmartin93Posted over 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
    0
    Bellyā€¢300
    @Belly606Posted over 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

    1
  • Tushar Biswasā€¢4,080
    @itushPosted over 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
    0
    Bellyā€¢300
    @Belly606Posted over 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

    1
    Tushar Biswasā€¢4,080
    @itushPosted over 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! šŸ“ŒšŸŒŸ

    1

Please log in to post a comment

Log in with GitHub

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