QR code component solution

Hey dude congratulations on successfully completing the Qr code component..😃

• In Html :
• well dude there are so many Accessibility reports so fix the problem
• in fact using the semantic elements or non semantic elements to clear all Accessibility reports
• Ex :
• using the semantic elements

<header>
<h1>Improve your front-end skills by building projects</h1>
</header>
<main class="content">
<h2>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</h2>
</main>
<footer>
<p>Challenge by Frontend Mentor. Coded by Cisne Trujillo.</p>
</footer>

• whenever using the img tag Must be put the alt attribute
• Ex :

<img src="Qr-code.png" alt="qrcode"></img>

• In Css :
• your qr card is not center aligning so fix them problem

body {
display:flex;
align-items:center;
justify-content:center;
height:100vh;
overflow-x:hidden;
max-width:100%;
}

• I Hope it's useful for you
• Happy Coding dude

Yes, I think there is a more effective way to centre content vertically than using position: absolute; - using Flexbox. You can centre the card element vertically by adding the following CSS to the main element:

<main>
  <div class="card"></div> // card to be placed in the middle
</main>

main {
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

This will centre the card element horizontally and vertically within the main element. Flexbox is a great way to centre content, especially when dealing with dynamic content or elements of different sizes.

I hope this helps🙏

There are couple of ways to center a div.

As suggested, you can use Flexbox and align-items method. If you need to use align-items or justify-content to center, depends on the flexbox direction. If you have flex-direction: column; e.g. then you need you use justify-content: center; to align vertically because the main-axis of the flexbox is now a vertical one. Also just watch out if there is enough available empty space to use it for centering. Sometimes the container and content have actually same height, so there is nothing to center, but then you won't why it is not centering. So just be aware of such cases too.

You can also use CSS Grid, with only two lines: display: grid; place-items: center; you achieve a horizontal and vertical centering.

In some cases, similar to margin: 0 auto; for horizontal positioning, margin: auto 0; might work for cases when you need a vertical centering only.

Hope you find this feedback helpful!