QR code component | HTML | CSS | Media Queries

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted about 2 years ago

  Hi @Rhythm001 👋, good job on completing this challenge! 🎉

  I like this solution for the challenge. Here are a few suggestions I've made that you can consider in the future if you're looking to improve the solution further:

  • Instead of using pixels in font size, use relative units of measure like rem or em. The font size in absolute length units (px) does not allow users with limited vision to change the text size in some browsers. Reference.
  • Setting element width with percentages or VW will cause your component to behave weirdly on mobile devices and high-resolution desktops.
  • The container isn't centered correctly. You can use flexbox to center elements:

  body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* Your styles . . .*/
  }
  
  /* Remove the margin and update the width*/
  .container {
      background-color: hsl(0, 0%, 100%);
      max-width: 313px;
      /* width: 22%; */
      /* margin: 108px auto; */
      border-radius: 15px;
  }
  

  Links with 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).

  I hope those tips will help you.

  Good job, and happy coding!

  Marked as helpful

  1

  ---

  

  Rhythm•30

  @Rhythm001Posted about 2 years ago

  @MelvinAguilar Cool. Thank you!

  1