QR Code Component Solution

Community feedback

• 

  Marcos Travaglini•6,210

  @BlackpachamamePosted 26 days ago

  Para mantener tu footer siempre abajo puedes hacer los siguientes cambios:

  body {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
  }
  
  main {
      width: 320px;
      background: #fff;
      padding: 16px 16px 40px;
      border-radius: 20px;
      margin: 20px;
      text-align: center;
  }
  
  footer {
      padding: 0.5rem;
      background-color: #fff;
      width: 100%;
      margin-top: auto;
  }
  

  Esto mantendrá tu footer siempre abajo sin importar el tamaño de la pantalla, sin embargo, si además, quieres que tu card este centrada verticalmente, tendrías que hacer cambios extra en tu HTML:

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

  main {
      min-height: calc(100vh - 30px);
      display: flex;
      justify-content: center;
      align-items: center;
  }
  
  article {
      width: 320px;
      background: #fff;
      padding: 16px 16px 40px;
      border-radius: 20px;
      margin: 20px;
      text-align: center;
  }
  

  Pruébalo, si no entiendes algo, puedes preguntarme.

  Marked as helpful

  0
• 

  Vladimir Popovic•70

  @vpopovic003Posted 26 days ago

  Yes, you can keep the footer at the bottom without flex box or grid, by using margin-top: auto; on the footer.

  This will push it down, but first make sure that your container element (in your case body I believe) is taking up 100% of the screen height (height: 100vh; for example).

  However, this will probably push the main element all the way up, unless you give it top margin. You can margin-top: auto on it to push it to the middle, or some other fixed margin if you want it elsewhere.

  0
• 

  P

  Coder-Liz•210

  @Coder-LizPosted 26 days ago

  To improve the semantic structure, you might consider organizing the tags like this:

  <main> <h1>Main Heading</h1> <img src="example.jpg" alt="Description"> <h2>Heading</h2> <p>Paragraph content</p> </main> <footer> <a href="#">Link in footer</a> </footer> To visually hide the H1 heading I used this code: .visually-hidden { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

  0

  ---

  

  Chrystiana Penalber•100

  @chryspenalberPosted 26 days ago

  @Coder-Liz Thank you for your comment and tips!

  0