QR Code

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello Sanja, congratulations for your first solution!

  I've looked your card and about the design part you did good, the card elements are fine, colors, the border-radius and box-shadow all match the reference image, you've only to work around the alignment, you've used margins to align that, but isn't the best way to that. See the steps below to understand how can you fix that with flexbox.

  1.👾 Add min-height: 100vh; to the body to allow body to display 100% of the viewport and them display: flex; to align the child elements, use these properties for alignment align-items: center; justify-content: center; code below:

  body { display: flex; font-family: 'Outfit', sans-serif; background-color: hsl(212, 45%, 89%); height: 100vh; align-items: center; justify-content: center; }

  2.👾Remove the margins you've add to the div named card and note that the body will align you card, remove width and apply max-width for a flexible container, see the code below:

  .card { max-width: 320px; background-color: hsl(0, 0%, 100%); padding: 15px; /* margin: auto; */ /* margin-top: 150px; */ border-radius: 20px; box-shadow: 0 0 100px rgb(0 0 0 / 20%); }

  Hope it helps you, happy coding!

  Marked as helpful

  0

  ---

  

  Sanja•40

  @sdrenjanPosted over 2 years ago

  @correlucas Thank you, that was really helpful! I will try your suggestions :) At first I used flex to align items inside card, but haven't thought to use it on card itself to center it.

  1

  

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  @sdrenjan Happy to hear that was useful, if you're not familiar to flexbox, try this articles that explains a lot about it: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

  1
• 

  faizan•2,420

  @afaiz-spacePosted over 2 years ago

  Hey @sdrenjan,

  • use flex or grid property to the object center.

  1

  ---

  

  Sanja•40

  @sdrenjanPosted over 2 years ago

  @afaiz-space Thank you, I used flex in my first version, but then I realised that in this example text-align: center and margin: auto are enough, I got same result by just deleting display: flex. Is there any particular reason I should use flex instead?

  1