QR Code Component

Community feedback

• 

  MikDra1•6,980

  @MikDra1Posted 2 months ago

  If you want to make your card responsive with ease you can use this technique:

  .card {
  width: 90%;
  max-width: 37.5rem;
  }
  

  On the smaller screens card will be 90% of the parent (here body), but as soon as the card will be 37.5rem (600px) it will lock with this size.

  Also to put the card in the center I advise you to use this code snippet:

  .container {
  display: grid;
  place-items: center;
  }
  

  Hope you found this comment helpful 💗💗💗

  Good job and keep going 😁😊😉

  Marked as helpful

  0
• 

  Huy Phan•2,300

  @huyphan2210Posted 2 months ago

  Hi, @Abo3bazez I saw your solution and I have some thoughts:

  • I assume the "container" you're referring to is .qr-container. You're currently using @media screen and (min-width: 375px) to set its width to 17.1875rem, which is a fixed size. If you want the image to be fully responsive (as you're using max-width: 100% on the image inside the .qr-container), the container itself needs to be responsive too. Consider setting the .qr-container width to a relative value, like 90%, and then apply a max-width with a reasonable absolute value. For example:

  .qr-container {
      width: 90%;
      max-width: 400px;
  }
  

  Let me know if that works!

  Marked as helpful

  0