Responsive QR Code Component using Flexbox

Community feedback

• 

  Travolgi 🍕•31,340

  @denieldenPosted over 2 years ago

  Hello Aviral, You have done a good work! 😁

  • Font sizes are eye to eye unless you are given the size to insert in the code.
  • The approach to Media Queries is very easy: you only use them when the design breaks at a certain screen resolution and you scale the code of the same classes to that resolution read here

  Some little tips to improve your code:

  • remove all unnecessary code, the less you write the better as well as being clearer: for example the div container of qr image
  • remove all margin from box class
  • use flexbox to the body to center the card. Read here -> best flex guide
  • use min-height: 100vh to body instead of height, otherwise the content is cut off when the browser height is less than the content

  Keep learning how to code with your amazing solutions to challenges.

  Hope this help 😉 and Happy coding!

  Marked as helpful

  1

  ---

  

  Aviral Sharma•220

  @aviralsharma07Posted over 2 years ago

  @denielden Thank You Very Much for the feedback! I'll do it again and improve on the things you have told me.

  1

  

  Travolgi 🍕•31,340

  @denieldenPosted over 2 years ago

  @aviralsharma07 You are welcome and keep it up :)

  1
• 

  

  Grace•32,130

  @grace-snowPosted over 2 years ago

  That img is the most important content on the page, why have you aria hidden it?!

  Don't use the b element. Set the font weight you want in css

  Body should never have a limited height. Use min height instead.

  Beware using % for border radius. It will have horrible results if used on anything that's not square

  Marked as helpful

  1

  ---

  

  

  Grace•32,130

  @grace-snowPosted over 2 years ago

  Here are notes and changes made in browser. I hope they are helpful:

  
  /* styles.css | https://qr-code-component-aviral.netlify.app/styles.css */
  
  body {
    /* height: 100vh; */
    min-height: 100vh;
    display: grid;
    place-content: center;
  }
  
  .box {
    /* margin: auto; */
    /* margin-top: 3rem; */
    /* display: flex; */
    /* flex-direction: column; */
    /* justify-content: center; */
    /* border-radius: 3%; */
    margin: 1rem;
    border-radius: 15px;
    text-align: center;
  }
  
  .attribution {
    /* bottom: 10px; */
    /* width: 100%; */
    /* position: absolute; */
  }
  
  .attribution p {
    /* font-size: 0.8rem; */
    /* color: hsl(212, 7%, 60%); */
    /* margin: 1.8rem auto auto 0; */
    font-size: 0.9375rem;
    margin: 1.8rem;
  }
  
  .attribution a {
    /* font-size: 0.8rem; */
    /* color: hsl(212, 7%, 60%); */
  }
  
  .qrCode img {
    not: ;
    note: why is this in a div? Does it need it?;
    note: must not be aria-hidden;
  }
  
  .textBox {
    /* text-align: center; */
    /* padding: 1.5rem 0 0.5rem 0; */
  }
  
  .textBox h1 {
    margin-top: 1rem;
  }
  
  .textBox p {
    /* margin: 0.5rem 0; */
    margin: 0.5rem auto;
    note: remove all <br> elements. That is not a good way to do line breaks. Instead have a max-width on the paragraph;
    max-width: 25ch;
  }
  
  /* Inline #1 | https://qr-code-component-aviral.netlify.app/ */
  
  footer {
    note: Footer is its own landmark. It should NOT sit within main;
  }
  
  main {
    /* display: center; */
    display: grid;
    place-content: center;
  }
  
  

  Marked as helpful

  1

  

  Aviral Sharma•220

  @aviralsharma07Posted over 2 years ago

  @grace-snow Thank You very much for the feedback! I'll do it again and improve on the things you have told me this time.

  0
• 

  Maca•630

  @Maacaa0Posted over 2 years ago

  Hello,

  To answer your first question. I use browser extension called perfectpixel. Which let you put the design image overlay over the page you are creating. It helps you see how accurate you are with your project.

  Hope I helped 😁

  Good work, keep it up.

  Marked as helpful

  1

  ---

  

  Aviral Sharma•220

  @aviralsharma07Posted over 2 years ago

  @Maacaa0 Thank you for the Resource !!

  0