Centered QR code component

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello , congratulations for your new solution!

  To create box-shadows its kinda tricky if you create it using only the coding line, my advice for your is create the shadows using Figma where you create the shadow design and just drop the code, the devtools in Google Chrome where you can manage the shadow values.

  Anyway the value for the shadow is: box-shadow: 5px 5px 15px 5px rgb(0 0 0 / 3%);

  If you're not familiar to Figma you can use this online tool to create your shadows: https://www.cssmatic.com/box-shadow

  👋 I hope this helps you and happy coding!

  Marked as helpful

  1

  ---

  

  RabbitMaid•1,020

  @AgbortokoPosted over 2 years ago

  @correlucas Thanks very much

  0
• 

  Pulkit saxena•890

  @Pulkit-s21Posted over 2 years ago

  @Agbortoko imo the best way to do this challenge is by using display:grid

  1. Place the qr code and text in seprate divs and both the divs in one container and apply grid to it with grid-template-columns: repeat(1,1fr).
  2. For the box shadow apply it to the container and the challenge will be done.
  3. At last just set max-width on the container to around 35 rem or so Ig but that can be done with trial and error method
  4. To center the container use display:flex min-height:100vh justify-content:center align-items:center to the body

  Marked as helpful

  1

  ---

  

  RabbitMaid•1,020

  @AgbortokoPosted over 2 years ago

  @Pulkit-s21 Thanks man!

  0