QR Code Component using HTML and CSS

Hi @dquindara8 👋, good job for completing this challenge!

Like the other suggestions here are some suggestions to improve your code:

There are two modern CSS techniques to center elements:

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;
}

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)

And remove all position properties:

.container {
    /* top: 66px; */
    /* margin: auto;*/
    max-width: 280px;
    min-height: 435px;
    /* position: relative; */
    background-color: white;
    border-radius: 15px;
}

/* Add this */
.image {
   padding: 10px
}

img {
    /* margin: 10px; */
    width: 100%;
    object-fit: contain;
    /* position: absolute; */
    /* top: 12px; */
    /* left: 14px; */
    border-radius: 6px;
}

.para1 {
    /* position: absolute; */
    /* top: 265px; */
    /* left: 30px; */
    text-align: center;
    font-weight: 700;
    font-size: 1.125rem;
    line-height: 1.3;
    color: hsl(218, 44%, 22%);
}

.para2 {
    /* position: absolute; */
    /* top: 335px; */
    /* left: 30px; */
    text-align: center;
    font-weight: 400;
    font-size: 0.813rem;
    line-height: 1.3;
    opacity: 0.5;
}

I hope those tips will help you.

Good Job and happy coding !

Thanks Christy!

Hey @hossamyosri, I hope you're doing great!

You could use CSS Flex to vertically and horizontally center your container. Here's how:

body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

I am just a newbie, but here's my solution if you want to take a look:

https://www.frontendmentor.io/solutions/qr-component-using-css-flex-FxuBLT9kE9

Keep up the great work!👏

Hi Quindara,

To center the QR code component, try to add the below lines to your CSS:

      body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
      }

Happy Coding! 🎉🎉🎉