Responsive QR code page using Html & Css

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted about 2 years ago

  Hi @Iniy96 👋, good job for completing this challenge! 🎉

  Here are some suggestions you might consider:

  • Centering the element with position would make your element behave strangely on some mobile devices. There are two modern CSS techniques to center elements instead of position:

  Using flexbox layout:

  body {
     margin: 0;
     width: 100%;
     min-height: 100vh;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
  }
  

  Using grid layout:

  body {
     margin: 0;
     width: 100%;
     min-height: 100vh;
     display: grid;
     place-content: center;
  }
  

  And remove all the position properties from the container:

  .container {
      background-color: hsl(0, 0%, 100%);
      /* width: 20%; */
      max-width: 300px;
      align-items: center;
      text-align: center;
      padding: 15px;
      border-radius: 10px;
      /* position: absolute; */
      /* top: 50%; */
      /* left: 50%; */
      /* transform: translate(-50%,-50%); */
  }
  

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

  .

  • Add a <h1> tag in your solution, The <h1> element is the main heading in a web page. There should only be one <h1> tag per page, and always avoid skipping heading levels; always start from <h1>, followed by <h2> and so on up to <h6> (<h1>,<h2>,...,<h6>). The HTML Section Heading elements (Reference)

  Solution:

  <h1>Improve your front-end skills by building projects</h1>
  

  I hope those tips will help you.

  Good Job and happy coding !

  Marked as helpful

  1