Submitted 4 months ago

Product preview card component solution

Rodrigo Cont Joviano dos Santos• 100

@Cjsrodrigo

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Product preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I'm proud of how dealing with a responsive layout wasn't such a hard challenge to deal with. Learning Flexbox and dealing with media queries was such an exciting challenge. On next projects I will try to apply more advanced use of Flexbox. Looking forward for future challenges!

What challenges did you encounter, and how did you overcome them?

The main challenge was starting to use em and rem, instead of px and understanding how to make it look good. Also learning why the em/rem properties are the best use for responsive layouts.

What specific areas of your project would you like help with?

I'd like to know If spacing between texts look good compared to the original design, wasn't able to make spacing a little smaller. Also a feedback on code quality is always welcome. Thanks.

Community feedback

JuvoGenesis👾• 2,010

@AkoToSiJeromeEh

Posted 4 months ago

Hey ! Great work out there i just notice that the product card component does not vertically position on center , you are correct on applying display : flex on body but there are missing properties that is align-items , justify-content and also the most important is height without this we cannot properly align the card component. regarding on space-between on text i see that there are too much of spacing differentiate on original design have and i usually use em on margin and padding while rem is for width and font-size. that's all happy coding !!!

body {
  display: flex;
  flex-direction: column;
  background-color: hsl(30, 38%, 92%);
  align-items: center; // add this
  justify-content: center; // add this
  min-height: 100vh; // add this
}

Please log in to post a comment

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