Frontend Mentor | Centered QR code using Flex coding challenge solution

Solution retrospective

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

I was able accurately calculate the total space between each element and make the text fit just like in the original mockup

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

To align the card in the center because it was the only element inside the body. Then I realized the body had to be set at a minimun height of 100vh

Community feedback

MikDra1• 5,990

@MikDra1

Posted about 6 hours ago

If you want to make your card responsive with ease you can use this technique:

.card {
width: 90%;
max-width: 37.5rem;
}

On the smaller screens card will be 90% of the parent (here body), but as soon as the card will be 37.5rem (600px) it will lock with this size.

Also to put the card in the center I advise you to use this code snippet:

.container {
display: grid;
place-items: center;
}

Hope you found this comment helpful 💗💗💗

Good job and keep going 😁😊😉

Marked as helpful

Nico Velasco• 40

@Darionvr

Posted about 3 hours ago

Thanks! The responsive technique helped me use fewer lines of code in my next challenge :) @MikDra1

Steven Stroud• 4,100

@Stroudy

Posted about 8 hours ago

Amazing job with this! You’re making fantastic progress. Here are some small tweaks that might take your solution to the next level…

Using a <main> tag inside the <body> of your HTML is a best practice because it clearly identifies the main content of your page. This helps with accessibility and improves how search engines understand your content.
Using max-width: 100% or min-width: 100% is more responsive than just width: 100% because they allow elements to adjust better to different screen sizes. To learn more, check out this article: responsive-meaning.
Developers should avoid using pixels (px) because they are a fixed size and don't scale well on different devices. Instead, use rem or em, which are relative units that adjust based on user settings, making your design more flexible, responsive, and accessible. For more information check out this, Why font-size must NEVER be in pixels or this video by Kevin Powell CSS em and rem explained.- Another great resource for px to rem converter.
For future project, You could downloading and host your own fonts using @font-face improves website performance by reducing external requests, provides more control over font usage, ensures consistency across browsers, enhances offline availability, and avoids potential issues if third-party font services become unavailable.
Using a full modern CSS reset is beneficial because it removes default browser styling, creating a consistent starting point for your design across all browsers. It helps avoid unexpected layout issues and makes your styles more predictable, ensuring a uniform appearance on different devices and platforms, check out this site for a Full modern reset

I hope you found this advice helpful! Keep up the great work, and don’t forget to dive deeper into the details. You’re doing amazing, and I can’t wait to see what you create next. Happy coding! 🚀

Marked as helpful

Nico Velasco• 40

@Darionvr

Posted about 3 hours ago

Thank you very much! REM and EM are definitely something I will put into practice 🫡 @Stroudy

Shuaib Mursaleen• 10

@Saul077

Posted about 8 hours ago

Pretty good!

Centered QR code using Flex

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community