Product preview card

Community feedback

• 

  IryDev•1,580

  @IryDevPosted over 1 year ago

  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

  ---

  

  Rogério Ribeiro•60

  @rogerio-sousa-ribeiroPosted over 1 year ago

  @IryCode

  Boa tarde, colega

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

  0

  

  IryDev•1,580

  @IryDevPosted over 1 year ago

  @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