Skip to content
Submitted over 1 year ago

Product Review Card (desktop view only)

kingchoffy•80
@kingchoffy
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

Community feedback

  • Melvin Aguilar 🧑🏻‍💻•61,140
    @MelvinAguilarPosted over 1 year ago

    Hello there 👋. Good job on completing the challenge !

    I have some suggestions about your code that might interest you.

    Metadata 🗃️:

    • The viewport meta tag is missing. the viewport meta tag is used to control the layout of the page on mobile devices. Add the viewport meta tag to the <head> tag: <meta name="viewport" content="width=device-width, initial-scale=1.0">.

      You can check your solution on a mobile device to see how your solution is distorted by not using this tag. ⚠️

    HTML 🏷️:

    • Wrap the page's whole main content in the <main> tag.
    • The <br> tag is often used to create line breaks, but it doesn't convey any semantic meaning. When a screen-reader reads the text, it will break the flow of reading at the line break tag, which can be confusing for users. More information here.
    • The product image is not a decoration. You must not use the background-image property to add the product image. Instead, use the <picture> tag to add the image. Use the background-image property only for decorative images that do not add any information to the page.

    CSS 🎨:

    • Instead of using pixels in font-size, use relative units like em or rem. The font-size in absolute units like pixels does not scale with the user's browser settings. Resource 📘.
    • To center the component in the page, you should use Flexbox or Grid layout. You can read more about centering in CSS here 📘.

    Using grid layout to center:

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

.container {
    text-align: left;
    /* margin: 0 auto; */
    /* padding: 150px 0; */
    display: flex;
    width: 400px;
}

    I hope you find it useful! 😄 Above all, the solution you submitted is great!

    Happy coding!

    Marked as helpful
    0
    kingchoffy•80
    @kingchoffyPosted over 1 year ago

    @MelvinAguilar Thank you so much for taking the time to go through my code and providing this Wonderful suggestions for me

    i am still new with the concept of Grids and Flex. I have implementated your suggestions and they work magic.

    any ideal on how to make my cart icon work on the submit button?

    Thanks i appreciate your feedback ❤

    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