QR code component

Community feedback

• 

  JuvoGenesis👾•2,010

  @AkoToSiJeromeEhPosted 6 months ago

  Hey ! great work out there i just notice that you are using margin on the .card in order to center the card component but it doesn't work as expected , i suggest that you use display : grid or display : flex in-order to center the card , thats all happy coding !!

  by adding the display : grid and place-items : center you can achieve to center the card and any future work you create : )

  body {
    background-color: var(--light-grey);
    font-family: Outfit, sans-serif;
    font-kerning: none;
    min-height: 100vh;
    width: 100%;
    display: grid;// add this or you can change display : flex;
    place-items: center; // add this or you can change align-items : center with justify-content : center;
  }
  

  .card {
    background-color: var(--white);
    border-radius: 20px;
    box-shadow: 0 25px 25px 0 var(--shadow);
    margin: 212px auto;// you can remove this
    padding: 16px 16px 40px;
    text-align: center;
    width: 320px;
  }
  

  Marked as helpful

  1

  ---

  

  ha308ing•90

  @ha308ingPosted 6 months ago

  @AkoToSiJeromeEh thank you so much for your feedback! noted and fixed! 🤝

  for alignment i used design file as background with Pixel Glass and to align with that background I had to place the card not exactly at the center of the vertical axis.

  0