Skip to content
Submitted 5 months ago

Responsive QR code website using CSS Flexbox

Zidan Niyas•10
@Zidan-Niyas
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

Aligning the container vertically and horizontally was a challenge. I aligned it horizontally using "justify-content: center" in CSS styles, but vertically it was not aligning to the center using "align-items: center" was not working. So i used "margin-top" to align the container vertically to the center of the page

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

I would like to get help with alignment issues I have, aligning the container to the center always troubles me. I don't think i am using flexbox correctly. I don't understand under which selector I should add display type as flex and use justify-content and align-items.

Community feedback

  • Dylan de Bruijn•3,230
    @DylandeBruijnPosted 5 months ago

    Hi @Zidan-Niyas,

    Your solution looks very close to the design, good job! I like that you experimented with flex.

    There are a couple reasons why your card wasn't aligning vertically, let me try to explain:

    • The body element has the property display: block by default. Which causes it to scale with the content inside it. If you add min-height: 100% to the body it will take up 100% of the height of the screen at a minimum. You'll be able to center your card then using flex.

    • You mixed up align-content: center; and align-items: center; You can read up what the difference between the two is here.

    I suggest reading this article if you want to learn more about flex. It helped me out a lot in the past and I still use it as a cheatsheet.

    A bit of friendly constructive feedback:

    • I suggest using clear and descriptive classes for your elements, this helps other developers understand your code.

    • You could try experimenting using gap in combination with flex to set the spacing between elements instead of padding. It's a handy property.

    • CSS variables could make your code more reusable and helps you remember values like hex-code colors easily by assigning a name to them.

    I hope you find my feedback helpful and my explanation makes sense. Let me know if you have more questions I could help with.

    Happy coding!

    0

Please log in to post a comment

Log in with GitHub

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