Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Challenge complete with just HTML and CSS (media queries)

@vinimello0

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I know that was not the same desing, but I tried to make it as similar as possible.

Community feedback

Bryan Li 3,550

@Zy8712

Posted

Your site looks great. Good work!

One minor thing I feel you could change in your projects moving forwards is that you don't need alt descriptions for images that are main for decorative purposes. You could just lave it as alt="". That way screen readers won't have to read it out. The main situations when you would need an alt description is when the image conveys some type of important information.

Marked as helpful

1

@ratul0407

Posted

@vinimello0 congrats on completing this challenge🎉🎉

Alright @vinimello0 we have a lot to fix so let's go : )

main {
  display: grid;
  place-content: center;
  min-height: 100vh;
}

.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 600px
}
//remove all the other properties from the wrapper. These 4 lines will do the work

.content_box {
min-height: 100%;
//with all the other properties you've set
}

Always try to avoid position: absolute as much as possible It's not worth for everything trust me😅

And you didn't set the mobile image to set it just use the picture tag and the source tag. Here's the mdn reference for your help.

I hope this was helpful for you😀😀

Happy coding my friend🙂

Marked as helpful

1

Please log in to post a comment

Log in with GitHub
Discord logo

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