Responsive QR Code Component with Plain CSS

Community feedback

• 

  Adarsh•1,640

  @adram3l3chPosted almost 3 years ago

  Hi Jhon, congrats for finishing this one ✨.

  Lets talk about relative units.

  vh - view height - It is the height of your view port means screen. 100vh is equal to 100% of screen height similarly 50vh is 50% screen height.

  vw - view width - It is same as vh but instead of height here width is referred.

  rem - rem means relative to the root font size. By default 1rem is 16px. But if you increase the font size in root rem also incrases.

  em - similar to rem, but instead of relative to root in em it is relative to the nearest parent with fixed font size. Let's look at an example

  <div class="grand-parent">
    <div class="parent">
         <div class=child />
    </div>
  </div>
  
  :root{
     font-size:14px; //16px by default
  }
  
  .grand-parent{
    font-size:1rem;   //1 * root font size = 1 * 14px = 14px
    font-size:2rem;  // 2 * 14px = 28px
    font-size:1em;  // first check whether there is a parent with fixed font size. no such parent 
    except root , so 1em = 1 * 14px
  }
  
  .parent{
    font-size:2rem; // 28px
  }
  
  .child{
    font-size:2em; // parent has a font size of 28px so 2em = 2 * 28px = 56px
    font-size:2rem  //2 * 14px = 28px;
  

  Hope you understood the concept

  Marked as helpful

  0

  ---

  

  Jhon Michael Manik•30

  @jhonmiccPosted almost 3 years ago

  @adram3l3ch omg its so helpful for me, thank you

  1
• 

  Naveen Gumaste•10,480

  @NaveenGumastePosted almost 3 years ago

  Hay ! Good Job Jhon

  These below mentioned tricks will help you remove any Accessibility Issues

  -> Add Main tag after body like it should be your container. For 1st heading or h1 tag, use header tag and then inside the header put your h1 or h2 etc . But use header tag only once in main heading element.

  Keep up the good work!

  0

  ---

  

  Jhon Michael Manik•30

  @jhonmiccPosted almost 3 years ago

  @Crazimonk thank you for the trick, I will implement it later

  1