QR Code using the CSS position feature

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello ReeAya, congratulations for your new solution!

  I saw that you've used margins and position relative to give the container its alignment, this works but is really tricky to control all the content. My advice for your is to use flexbox to create this alignment. First of all put min-height: 100vh to the body to make the body display 100% of the viewport height (this makes the container align to the height size thats now 100% of the screen height) size and display: flex e flex-direction: column to align the child element (the container) vertically using the body as reference.

  body {
      display: flex;
      min-height: 100vh;
      background-color: hsl(212, 45%, 89%);
      align-items: center;
      justify-content: center;
  }
  
  .qr-code_container {
      background-color: white;
      height: 21.5rem;
      width: 13rem;
      margin: auto;
      border-radius: 10px;
      padding: 1rem;
      position: relative;
      /* top: 6rem; */
      box-shadow: 2px 2px 10px grey;
  }
  

  👋 I hope this helps you and happy coding!

  Marked as helpful

  0

  ---

  

  ReeAya•40

  @ReeAyaPosted about 2 years ago

  @correlucas Thanks for your comments. Flexbox was a little difficult for me at the time, but now I'm going through that and CSS Grid, it makes much more sense and is much easier to use it! I will retry it with your suggestion. Thanks again for taking time to comment. It's very much appreciated!

  0
• 

  imad•3,330

  @imadvvPosted about 2 years ago

  Greeting ReeAya!! Congratulations for completing Your challenge!, 👏👏👏

  I saw that you're using position to align content on the page which is a letter bit tricky to get it right, maybe a more robust approach is to use either flex or grid,

  for example using grid, first of all add to the body min-height: 100vh to make the body display 100% of the browser screen size and display: grid ; and place-content: center; to align the child element (.qr-code_container) perfectly on the center using the body as reference. and just remove top: 6rem; from (.qr-code_container).

  body {
  
      display: grid;
      place-content: center;
      min-height: 100vh;
      gap: 2rem;
  }
  
  .qr-code_container {
   /*   top: 6rem; */
  }
  
  
  .attribution {
   /*   position: absolute; */
      /* bottom: 10px; */
  }
  

  you can make this changes and see the deference,

  and author suggestion is to use meaningful tags for big block of elements, in this case you can replace the <div class="qr-code_container"> with <main class="qr-code_container"> and <div class="attribution"> with <footer class="attribution">.

  Hope this help!

  over all, you did great, Happy Codding, and keep up the Good work

  Marked as helpful

  0

  ---

  

  ReeAya•40

  @ReeAyaPosted about 2 years ago

  @imadbg01 Thanks so much! I really appreciate the feedback. I'm right now learning CSS Grid and I'm understanding what you're saying. It would be much easier a better to use that :D I'm currently working on another challenge that actually uses CSS Grid so I'm really learning a lot. Thanks again! I'll keep trying!

  1

  

  imad•3,330

  @imadvvPosted about 2 years ago

  @ReeAya You're very welcome, glad to hear you're learning more about CSS Grid. It's a great skill to have and it'll be really helpful for the challenges you're working on. I hope you find them enjoyable and that they help you learn even more about CSS Grid.

  0