All comments

• 

  Ashesh Mondal• 90

  @Ashesh-Mondal

  Submitted over 1 year ago

  

  Qrcode card using flexbox

  1

  30

  

  Ankit• 40

  @fabledankit

  Posted over 1 year ago

  When you are doing rounded corners inside a container with rounded corners, you want the border-radius of the inner component to be almost 1/2 of the border-radius of the container.

  This is what i did, please let me know if there's something that I can do better. (https://frontend-mentor-challenges-mdbe-536imekjx-fabledankit.vercel.app/)

  .card-component {
    width: 250px;
    /* margin: 10em auto; */
    border-radius: 2em;
    background: #fff;
    padding: 1.6em;
    box-shadow: 15px 9px 30px rgba(214, 226, 240, 0.25);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  .card-component img {
    width: 100%;
    height: 100%;
    border-radius: 1em;
  }
  

  Marked as helpful

  0
• 

  kalmod• 20

  @kalmod

  Submitted over 1 year ago

  • Box-shadow, font-size, and setting the right flex properties on the children.
  • What are usually the best approaches to take when approximating the size of content?

  

  QR Code Component

  3

  50

  

  Ankit• 40

  @fabledankit

  Posted over 1 year ago

  I looked at the font size provided for the paragraph, and look at how it was wrapped in the container. Now resize the container until it wraps the way it did in the design. That's how I did it. Hope it helps 👍

  1