Submitted about 2 years ago

QR-code-component-main using CSS grid

asya•50

@asya982

Preview site View code

This is a solution for...QR code component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

I have a question which was remained unsolved... I couldn`t figure out how to vertically align my elemnts (especially on phones)...If you can give me any tips how to do that, I's be very grateful! Thank you in advance

Community feedback

Hyron•5,870

@hyrongennikePosted about 2 years ago

Hi @asya982,

Congrats on completing the challenge

To center the card on the page you can replace your body rule with the one below.

body {
    background-color: hsl(212, 45%, 89%);
    font-family: 'Outfit', sans-serif;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

Hope this is helpful

Marked as helpful

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