QR Code Component - HTML and SASS with Flexbox

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hello, Bel Sahn! 👋

  It looks like @gerichilli has answered all your questions. I just want to add some things.

  • The role attribute can't receive random values. Also, you don't need to use role attributes in this case. I recommend using the semantic HTML whenever possible.
  • I also don't recommend changing the html or the :root font size. It can cause huge accessibility implications for those users with different font size or zoom requirements. I suggest reading this article by Josh Comeau where he tells about the problem of the 62.5% trick (and more!).
  • I highly recommend writing the styling using the mobile-first approach. So, instead of using max-width media query, you will use min-width media queries. It often leads to shorter and better performance code. Also, mobile users won't be required to process all of the desktop styles.

  I hope this helps!

  Marked as helpful

  1

  ---

  

  Bel Sahn•440

  @BelumSPosted over 2 years ago

  @vanzasetia Thanks, I made the changes, but may have botched the mobile-first approach, I'll keep at it going forward!

  0
• 

  Mi Vu•380

  @gerichilliPosted over 2 years ago

  Hi Bel Sahn, Congratulations on completing the first challenge, nice to meet you.

  First of all, I would like to answer your questions

  *** I have center this card as follows

  • I wrapped the card into a div .wrapper. I set the min-height of the .wrapper to 100vh to have a page that has the length >= the screen's height. You also don't need to use role="body" for the body tag because it's not necessary. And you don't need to use role="main" for the section because it's incorrect. You can read about the section tag here Section - MDN docs

  <div class="wrapper">
    <section class="card">
    </section>
  </div>
  

  • Then I use display: flex, align-items and justify-content to make the card centered on main

  .wrapper {
     /* */
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
  }
  

  • You can set the footer's position to absolute and put it at the bottom of the page so that it doesn't make the page height exceed 100vh
  • In .card you can remove margin: 20rem auto.
  • Now your card is in the center of the screen.

  *** You can find colors in style-guide.md, or if not, I usually use the EYE DROPPER extension to search for colors. Since the font is thin, I usually open the image in a separate tab, zoom in, and use the eye dropper to detect its color.

  *** Box shadow is

  box-shadow: 0px 25px 25px 0px rgba(0, 0, 0, 0.05)
  

  You can see the shadow is wide, blurred, the bottom of the card has shadow but the top is not. In such a case usually the y-offset and blur-radius will be large.

  *** I think you use enough css, but you should limit the use of roles in the html and if you do, read about it and be careful with it.

  *** Also we should not set the html font-size to 62.5%. It will be hard to combine your CSS with bootstrap because the html in bootstrap was 100%. You can read the explanations here. Never resize html/root font size down to 62.5%

  Have a nice day and happy coding!

  Marked as helpful

  1

  ---

  

  Bel Sahn•440

  @BelumSPosted over 2 years ago

  @gerichilli Thanks, I made the changes based on your feedback!

  0