Skip to content
Submitted almost 2 years ago

Product Preview Card Component Using Flex

Narah Karuna•130
@narahkaruna
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

Hello everyone! This is my solution for the Product Preview Card Component.

In the challenge, I used flexbox for the layout and the <picture> element to make the image responsive on different devices. I tried to make the design as responsive on all devices and as close to the design as possible.

Happy to hear feedback from the community.

Community feedback

  • Vicktor•900
    @Victor-NyagudiPosted almost 2 years ago

    Good job on this one.

    I didn't see any issues in the HTML or CSS. I also like that you used the BEM naming convention for your classes, which is good for organization.

    Good job on using custom properties and naming them well. A lot of people don't pay enough attention to using proper names for classes and CSS properties which can lead to small, unnecessary problems down the line.

    I noticed the card isn't centered on the screen.

    You could try making the <body> a flex container i.e. display: flex then align and justify it to the center. You can then add flex-direction: column since there are two items inside.

    body {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
}

    Try it, and let me know how it goes.

    All the best with future solutions.

    0
    Narah Karuna•130
    @narahkarunaPosted almost 2 years ago

    @Victor-Nyagudi

    I'll look into it.

    Thank you.

    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