QR code using HTML and CSS

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  "👾Hello Petri, congratulations for your solution!

  Your solution is almost perfect, but the container size is a bit too big. You need to fix it with max-width: 320px and give display: block to make your image resize with the component.

  See the code fixes below:

  img {
      display: block;
      border-radius: 15px;
      max-width: 100%;
  }
  
  .main-content {
      display: flex;
      max-width: 320px;
      /* height: fit-content; */
      border: solid white 30px;
      border-radius: 25px;
      display: flexbox;
      flex-direction: column;
      text-align: center;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      background-color: white;
      box-shadow: 0px 10px 30px hsl(220deg 15% 55%);
      align-items: center;
      justify-content: center;
  }
  

  Hope it helps, happy coding!

  Marked as helpful

  0

  ---

  

  Petri Saari•120

  @Peteksi95Posted over 2 years ago

  @correlucas Thank you very much, this is very helpful

  0