Submitted 7 months ago

Responsive-QR-Code

tommy flinch•100

@tflinch

Preview site View code

This is a solution for...QR code component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I took my time to create the elements and organize them in a div. Next time i would use a grid layout for centering.

What challenges did you encounter, and how did you overcome them?

I had challenges centering my content in my card container. I overcame this challenge using by using display flex and setting the flex direction to center.

.card-container{
    background: #FFFFFF;
    width: 320px;
    height: 497px;
    margin: 20rem auto;
    border: none;
    border-radius: 5%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

What specific areas of your project would you like help with?

My understanding of flex will help with deciding how to align my content.

Community feedback

Daniel 🛸•44,310
@danielmrz-devPosted 7 months ago
Hello, @tflinch!

Your project is looking fantastic!

I'd like to suggest a way to make it even better:

Using margin isn't always the most effective method for centering an element.

Here's a highly efficient approach to position an element at the center of the page both vertically and horizontally:

📌 Apply this CSS to the body (avoid using position or margins in order to work correctly):

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

I hope you find this helpful!

Keep up the excellent work!
0

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