Skip to content
Submitted about 2 years ago

Product preview card component

Peculiar•90
@s9trange
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

This project was a fascinating one. I got to learn new things while executing it. I'd say the only difficulty I experienced was adding different images for the mobile and desktop view but thanks to some resources, I was able to learn how to do that.

However, I have just one slight view. I wasn't able to code the design for mobile view. If I'm shown how to do that (in the comment section) I'd be really grateful.

Community feedback

  • Lucas 👾•104,340
    @correlucasPosted about 2 years ago

    👾Hello @s9trange, Congratulations on completing this challenge!

    Nice code and nice solution! You did a good job here putting everything together. I’ve some suggestions for you:

    1.The image is getting distorted, to avoid this behavior, use these steps, first add display: block and max-width: 100% to the <img> selector. To improve the responsiveness even more by adding the auto-crop property you can add object-fit: cover to make the image crop inside the container. Here’s the code:

    img {
    display: block;
    object-fit: cover;
    max-width: 100%;
}

    2.Use the tag <picture>to wrap the product image inside the html instead of using it as <img> or background-image (with the css). Using <picture> you wrap both images (desktop and mobile) and have more control over it, since you can set in the html when the images changes setting the screen size for each image.ote that for SEO / search engine reasons isn’t a better practice import this product image with CSS since this will make it harder to the image.

    Here’s the documentation and the guide to use this tag: https://www.w3schools.com/tags/tag_picture.asp

    ✌️ I hope this helps you and happy coding!

    Marked as helpful
    0
    Peculiar•90
    @s9trangePosted about 2 years ago

    @correlucas thank you boss

    0
  • Kawsar Ahmed Fahad•2,660
    @faha1999Posted about 2 years ago

    Hello, Peculiar Congratulations on finishing this project. It's lovely and great on the whole! Just a little tip:

    • add the below code to the body. It will center everything
    body {
    justify-content: center;
    align-items: center;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}
    • remove the below code from the body
    html, body {
    /* height: 100%; */
    /* width: 100%; */
    /* position: absolute; */
}

    • remove all types of margin & height from .white-box

    • remove all styles from #g

    #g {
    /* display: flex; */
   /* justify-content: baseline;*/
    /* align-items: flex-start; */
    display: flex; /*Only add this*/
}

    @media only screen and (min-width: 680px) {
#g{
flex-direction: column;
width: 100%;
}
}

    • add alt="image-product-desktop" attribute in img . This would help improve accessibility.

    • add <html lang="en">

    • This is my solution of this challenge live, repo

    I hope it will work. Happy coding.

    Marked as helpful
    0
    Peculiar•90
    @s9trangePosted about 2 years ago

    @faha1999 thank you so much

    0

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