google fonts,

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello YuvCarl, congratulations for your new solution!

  Here's my tips to you improve the qrcode image responsiveness and the card:

  Use the proper color for the background: background-color: rgb(214 231 239);

  Replace the width with max-width: 350px; to make it responsive:

  .card {
      padding: 16px;
      max-width: 350px;
      /* height: 560px; */
      background-color: white;
      display: flex;
      align-items: center;
      flex-direction: column;
      border-radius: 12px;
  }
  

  The main difference between width and max-width is that the first property is fixed and the second is flexible, for example, a component with width: 350px will not grow or contract because the size will be ever the same, but a container with max-width: 350px or min-width: 350px can grow or contract depending of the property you've set for the container. So if you want a responsive block element, never use width choose or min-width or max-width.

  Make the image resize with the container by adding max-width: 100% and display: block

  img {
      max-width: 100%;
      /* width: 95%; */
      /* height: 350px; */
      /* margin: 10px; */
      /* padding: 15px; */
      border-radius: 14px;
      border-radius: 12px;
      display: block;
  }
  

  👋 I hope this helps you and happy coding!

  0