All comments

• 

  tinamyr•10

  @tinamyrSubmitted almost 2 years ago

  

  Basic HTML and CSS QR Code Challenge

  1

  10
  

  Francisco M. Miranda•60

  @Francisco-M-MirandaPosted almost 2 years ago

  Hi, you shouln't use a fixed size for body. Default size body is 100% of your viewport. Try to use CSS flex properties to center the QR card. For example, I used this:

  .main {
      min-height: 100vh;
      background-color: hsl(212, 45%, 89%);
      display: flex;
      justify-content: center;
      align-items: center;
  }
  

  This should center your div automatically. Moreover, try to use semantic HTML tags instead only <div>s. For example, I used <main> to contain the <div> element that holds qr card. Here's my chunk of code:

  <main class="main">
          <div class="card">
              <img src="images/image-qr-code.png" alt="A QR code">
              <h1><strong>Improve your front-end skills by building projects</strong></h1>
              <p>Scan the QR code to visit Frontend Mentor and take yor coding skills to the next level</p>
          </div>
      </main>
  

  Happy coding ;)

  Marked as helpful

  0