Product Preview Card Component Challenge

Congratulations for completing the challenge

I have a suggestion for you regarding the image. Insteade of using display : none in the media queries you can use the <picture> element. It provides the feature of providing different images for different screen sizes.

Here is the link for it's reference Picture element reference W3Schools MDN reference

If you find this feedback valuable please mark this as helpful Cheers!

Hello friend, Display: none; is not the best practice for this situation try to learn about <picture> element and use it in this situation

Hey! you can also use the image as background of a div in css and then change the image on the desktop media query:

div {
    background: url('../images/image-product-mobile.jpg') center;
    background-size: cover;
}

But I think the solution of picture would be more correct in terms of accesibility and semantics.

Hi Chibuzor Isaac, how are you?

I really liked the result of your project, but I have some tips that I think you will enjoy:

• every Html document must contain the main tag, so we can identify the main content, to fix this, wrap all the content with the main tag. HTML5 landmark elements are used to improve navigation experience on your site for users of assistive technology.

to align the body on the center of the screen, do this:

@media (min-width: 675px)
body {
    margin: 0 auto;
}

The rest is great!

I hope it helps... 👍