Responsive QR using html5 and css3

Community feedback

• 

  Ecem Gokdogan•9,380

  @ecemgoPosted over 1 year ago

  Some recommendations regarding your code that could be of interest to you.

  • In order to center the card correctly, you can add min-height: 100vh to the body
  • If you want, you can use the recommended colors for the background of the screen and the card

  body {
     /* background-color:rgb(178, 219, 255); */
      background-color: hsl(212, 45%, 89%);    /* the recommended background-color */
      align-items: center;
      min-height: 100vh;
  }
  

  • after adding them, you don't need to use margin in the .container to center the card:

  .container{
      /* background-color: rgb(218, 238, 254); */
      background-color: hsl(0, 0%, 100%);   /* the background-color of the card is white */
      max-width: 20rem;       /* max-width makes it responsive */
      /* border-radius: 0.5rem; */
      border-radius: 5%;     /* 5% is more effective than .5rem for border-radius */
  }
  

  Hope I am helpful. :)

  Marked as helpful

  0

  ---

  

  sadi•110

  @theStabePosted over 1 year ago

  @ecemgo Surely it helped, Thanks.

  1