QRCode Component

Community feedback

• 

  Yasmine•700

  @Yasmine10Posted over 1 year ago

  Hi @atmaram-kambli,

  Great job on your first project!

  To center the main container you could change the following in your code:

  • in the body:

  body {
  font-family: 'Roboto Slab', serif;
  text-align: center;
  background-color: hsl(212, 45%, 89%);
  height: 100%;    // -> remove this and replace with min-height: 100vh;
  display: flex;
  flex-direction: column;     // -> remove this because this doesn't do anything
  align-items: center;
  justify-content: center;
  }
  

  • in your .main class:

  .main {
  background-color: hsl(0, 0%, 100%);
  border: 2px solid red;
  border-radius: 8px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  height: 450px;
  width: 350px;
  margin-top: 100px;   -> remove this line
  display: flex;
  align-self: center;
  flex-direction: column;
  align-items: center;
  }
  

  I also saw that your qr code image is a little stretched, to fix that you could add the following in your css:

  #qr {
  width: 100%;
  object-fit: cover;     // -> add this line
  }
  

  Hope this helps!

  Marked as helpful

  0