QR Code Card Element in HTML and CSS; Desktop First Design

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

  Hey @sdonohue0918, some suggestions to improve you code:

  This will center you code, make it responsive and remove any unnecessary code:

  
  body {
      min-height: 100vh;
      display: grid;
      place-content: center ;
      background-color: hsl(212, 45%, 89%);
  }
  
  
  
  .card {
      background-color: hsl(0, 0%, 100%);
      max-width: 320px;
      border-radius: 15px;
      text-align: center;
     padding: 16px
      
  }
  
  .card__qrcode {
      max-width: 100%;
      border-radius: 12px;
  
  }
  
  .text {
      font-family: 'Outfit', sans-serif;
  }
  
  .card__header {
      font-weight: 700;
      color: hsl(218, 44%, 22%);
      font-size: 1.4rem;
  }
  
  .card__paragraph {
    
      font-weight: 400;
      color: hsl(220, 15%, 55%);
      font-size: 1rem;
  
  }
  

  Happy Coding! 👻🎃

  Marked as helpful

  0

  ---

  

  Sean•10

  @sdonohue0918Posted about 2 years ago

  @vcarames Thanks for the feedback! Interesting to see place-content with grid on the body and text-align on the card itself as a solution for centering. Will keep these in mind in the future!

  0
• 

  TITOR•340

  @hectorestebanmPosted about 2 years ago

  Buenas @ sdonohue0918. Tengo unos consejos para darte:

  Dentro del body agrega las siguientes líneas body { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; } De esa forma centrarás tu card tanto horizontal cómo verticalmente automáticamente.

  Dentro de la clase ".card" yo eliminaría el height, y deja que la altura de tu card la determinen tus elementos a medida que los vas agregando, así no te quedarán tantos márgenes en blanco.

  Espero te sirvan estos tics, felicidades por completar el desafío.

  0