Submitted almost 2 years ago

QR Code Card Element in HTML and CSS; Desktop First Design

Sean• 10

@sdonohue0918

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

For 300px and lower viewport width, left margin of qr card is more compressed then right margin. Is this an issue because of the default margin and padding on the <body> tag?

Is there a simpler way to ensure the card is centered regardless of viewport width without fiddling with rems or percentage units on the card, qr code image, and the card margins?

Community feedback

バレンタイン 😈• 64,190

@VCarames

Posted almost 2 years ago

Hey @sdonohue0918, some suggestions to improve you code:

This will center you code, make it responsive and remove any unnecessary code:


body {
    min-height: 100vh;
    display: grid;
    place-content: center ;
    background-color: hsl(212, 45%, 89%);
}



.card {
    background-color: hsl(0, 0%, 100%);
    max-width: 320px;
    border-radius: 15px;
    text-align: center;
   padding: 16px
    
}

.card__qrcode {
    max-width: 100%;
    border-radius: 12px;

}

.text {
    font-family: 'Outfit', sans-serif;
}

.card__header {
    font-weight: 700;
    color: hsl(218, 44%, 22%);
    font-size: 1.4rem;
}

.card__paragraph {
  
    font-weight: 400;
    color: hsl(220, 15%, 55%);
    font-size: 1rem;

}

Happy Coding! 👻🎃

Marked as helpful

Sean• 10

@sdonohue0918

Posted almost 2 years ago

@vcarames Thanks for the feedback! Interesting to see place-content with grid on the body and text-align on the card itself as a solution for centering. Will keep these in mind in the future!

TITOR• 340

@hectorestebanm

Posted almost 2 years ago

Buenas @ sdonohue0918. Tengo unos consejos para darte:

Dentro del body agrega las siguientes líneas body { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; } De esa forma centrarás tu card tanto horizontal cómo verticalmente automáticamente.

Dentro de la clase ".card" yo eliminaría el height, y deja que la altura de tu card la determinen tus elementos a medida que los vas agregando, así no te quedarán tantos márgenes en blanco.

Espero te sirvan estos tics, felicidades por completar el desafío.

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord