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

Product Preview Card Component Using Flex

@narahkaruna

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


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-Nyagudi

Posted

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

@narahkaruna

Posted

@Victor-Nyagudi

I'll look into it.

Thank you.

0

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