QR Code Component using HTML and CSS

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted about 2 years ago

  Hi @dquindara8 👋, good job for completing this challenge!

  Like the other suggestions here are some suggestions to improve your code:

  There are two modern CSS techniques to center elements:

  Using flexbox layout:

  body {
     margin: 0;
     width: 100%;
     min-height: 100vh;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
  }
  

  Using grid layout:

  body {
     margin: 0;
     width: 100%;
     min-height: 100vh;
     display: grid;
     place-content: center;
  }
  

  More information:

  • The Complete Guide to Centering in CSS
  • A Complete Guide to Flexbox (CSS-Tricks)
  • How TO - Center Elements Vertically (W3Schools) |
  • CSS Layout - Horizontal & Vertical Align (W3Schools)

  And remove all position properties:

  .container {
      /* top: 66px; */
      /* margin: auto;*/
      max-width: 280px;
      min-height: 435px;
      /* position: relative; */
      background-color: white;
      border-radius: 15px;
  }
  
  /* Add this */
  .image {
     padding: 10px
  }
  
  img {
      /* margin: 10px; */
      width: 100%;
      object-fit: contain;
      /* position: absolute; */
      /* top: 12px; */
      /* left: 14px; */
      border-radius: 6px;
  }
  
  .para1 {
      /* position: absolute; */
      /* top: 265px; */
      /* left: 30px; */
      text-align: center;
      font-weight: 700;
      font-size: 1.125rem;
      line-height: 1.3;
      color: hsl(218, 44%, 22%);
  }
  
  .para2 {
      /* position: absolute; */
      /* top: 335px; */
      /* left: 30px; */
      text-align: center;
      font-weight: 400;
      font-size: 0.813rem;
      line-height: 1.3;
      opacity: 0.5;
  }
  

  I hope those tips will help you.

  Good Job and happy coding !

  Marked as helpful

  0

  ---

  

  Quindara Corbin•70

  @dquindara8Posted about 2 years ago

  Thanks very much Melvin

  1
• 

  Quindara Corbin•70

  @dquindara8Posted about 2 years ago

  Thanks Christy!

  0
• 

  Youssef Waleed•200

  @ywsolimanPosted about 2 years ago

  Hey @hossamyosri, I hope you're doing great!

  You could use CSS Flex to vertically and horizontally center your container. Here's how:

  body {
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
  }
  

  I am just a newbie, but here's my solution if you want to take a look:

  https://www.frontendmentor.io/solutions/qr-component-using-css-flex-FxuBLT9kE9

  Keep up the great work!👏

  0

  ---

  

  Quindara Corbin•70

  @dquindara8Posted about 2 years ago

  Thanks Waleed!

  0
• 

  Christy•40

  @christy313Posted about 2 years ago

  Hi Quindara,

  To center the QR code component, try to add the below lines to your CSS:

        body {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100vh;
        }
  

  Happy Coding! 🎉🎉🎉

  0