Responsive QR Code Card Component

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello Anthony, congratulations for your new solution!

  Your solution is already perfect bro, but there's one thing thats not allowing your component card to be responsive, is the width. Remember if you want that an element behave as a flexible element don't use width use max-width or min-width. If you set max-width: 320px this means that your container will maximum 320px but can be smaller than that, in the other hand with width: 320px means that will be this size, not less, not more.

  .card__content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
  ------------
      max-width: 20rem;
  -------------
  width: 20rem;
  ------------
      gap: 1rem;
      padding: 1rem;
      background-color: var(--color-white);
      border-radius: 12px;
      box-shadow: 0 10px 1.4rem rgb(0 0 0 / 10%);
  }
  

  👋 I hope this helps you and happy coding!

  Marked as helpful

  1

  ---

  

  P

  Anthony Acosta M.•100

  @874anthonyPosted over 2 years ago

  @correlucas Maaan thank you, I don't know how I forgot that, I was concerned about the same thing. I knew I was setting a fixed value but didn't knew how to make it responsive. Thanks once again and for taking your time to review it.

  1