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

Olaseni 140

@unkuseni

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

IryDev 1,580

@IryDev

Posted

Hey, well done for completed this challenge 😁

I have some suggestions to help you to improve your solution :

  • your card seem to not be correctly centered
  • You can use the properties display: flex;, align-items: center;, justify-content: center;, in order to correctly center your card
  • You can remove the property margin: 5rem auto;

CSS :

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction:column; 
}

I also make a pull request on your Github repo so you can merge it if the changes suit you

I hope you'll find this helpful, and your solution is really good

0

@rogerio-sousa-ribeiro

Posted

@IryCode

Boa tarde, colega

Não entendi o por que de usar o flex-direction, poderia me explicar?

0
IryDev 1,580

@IryDev

Posted

@rogerio-sousa-ribeiro if you don't use the property flex-direction your element will be arranged horizontally and the footer will be place at the right of your main content, by using flex-direction the footer will be placed at the bottom of the card. In fact the display flex is applied on the body so the element inside the body will be "flexible" in terms of the properties specifies. Here, the element are the main and the footer. That's why i would use the flex direction column

Here's a more detailled explanation on the flex-direction property :

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