Submitted over 1 year ago

Responsive landing page using CSS Grid

@nikolapetkovicdev

A solution to the QR code component challenge

Solution retrospective

I find difficult how to position photo of QR Code and text in a container. I'm unsure in a all CSS code.I'm not sure how it even works.

Code

Please log in to post a comment

Community feedback

MisterCcobD•120

@MisterCcobD

Posted over 1 year ago

In this case, i really don't think margins will help. Try flex on .container's parent also to center everything. Aaand, why used the positioning? Try live site on your phon(s) also to see if it resembles the requirements. Is one thing to check viewport size and completely different when you check on a phone in some cases.

body {
    background-color: hsl(212, 45%, 89%);
    min-height: 100vh;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.container {
    max-width: 350px;
/* padding: 1rem; */
    background-color: hsl(0, 0%, 100%);
    text-align: center;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

Marked as helpful

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