Submitted 6 months ago

Responsive QR code

Ryan King• 40

@MsftKing

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

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

I am very proud due to the fact that I focused on not looking at my notes and just trying to code this as if I was working on a project for a client on a deadline. I tried to use the documentation for many of the aspects that I was unsure of and played around with styling for a little before I figured out what I needed to do to get the display that I was looking for.

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

This biggest challenge I had was styling the @media query although I know it is not perfect, I am happy with the results. I used the documentation on media query to do the best that I can, and I am very happy with how it turned out in the end, especially in the sense of scalability.

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

The media query if someone wants to explain what I did wrong or what I can do better next time, I am all ears.

Community feedback

Daniel 🛸• 44,230

@danielmrz-dev

Posted 6 months ago

Hello, @MsftKing!

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!

Marked as helpful

Ryan King• 40

@MsftKing

Posted 6 months ago

Thank you so much, I was struggling trying to get the image to center the way I wanted. I will add this tip to my notes for future use! @danielmrz-dev

Anwar Mestycer• 420

@AnwarMestycer

Posted 6 months ago

Hi Ryan, You did well, and your work is great.

here's how can help you make it better,

In your HTML file, as best practice, all the code should be inside the <body> like this:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
your code should be written here
</body>
</html>

then add a body selector in your CSS file and apply the background-color: #D5E1EF; inside instead of html, which is useless in our context.

Also, to center your card display:flex; justify-content:center; align-items: center in the body selector. -Change the color of the h1 to black to match the design

This is just the beginning of your awesome journey as a front-end developer Keep up the good work.

I hope this was helpful, and if you need any help, don't hesitate to contact me here.

Ryan King• 40

@MsftKing

Posted 6 months ago

Thank you for your help! @AnwarMestycer

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