Submitted about 2 years ago

Product preview card component

Peculiar• 90

@s9trange

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

HTML
CSS

1newbie

View challenge

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,420

@correlucas

Posted 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

Peculiar• 90

@s9trange

Posted about 2 years ago

@correlucas thank you boss

Kawsar Ahmed Fahad• 2,680

@faha1999

Posted 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

Peculiar• 90

@s9trange

Posted about 2 years ago

@faha1999 thank you so much

Please log in to post a comment

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