QR Card

Community feedback

• 

  Chyunjet•620

  @JetyunPosted over 2 years ago

  the image, you can just set the width and height in px based on the card class, but a bit smaller. I take time to tamper with it to find the perfect width and height that matched with the design pic. the white space that is between the card class and your image, you can use margin:5px ( or more, I not sure, you can adjust it until it matched with the design pic} to create it.

  Marked as helpful

  0
• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello Omar, congratulations for your solution!

  I've checked your solution to understand why the image wasn't placed properly, to manage the image you need to add display: block and max-width: 100% to allow the image grow only inside its container to create the gap add padding to the container.

  .qr {
      /* padding: 20px; */
      border-radius: 20px;
      max-width: 100%;
      height: auto;
  }
  
  .card {
      margin: 0;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      background-color: hsl(0, 0%, 100%);
      border-radius: 30px;
      max-width: 320px;
      /* height: 450px; */
      padding: 20px;
  }
  

  If you want a simple way to build this solution, my advice for your is only using a single div to hold all the content (img, p, h1) and use flexbox to manage content/alignment, doing that with position: relative and margins gets really complicated to manage everything.

  Hope it helps and happy coding

  Marked as helpful

  0