Skip to content
Submitted 29 days ago

QR-code-component-main

Manisha3196•120
@Manisha3196
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?

I did not encounter one challenge that is normally we apply the width and height to containers but in this project when i applied width and height in the .container CSS style.It didn't fix anything.I struggled with it and applied to body lastly.It worked but honestly i don't know why it worked. Can anyone suggest me why it worked?

Is it because using flexbox or any other style that i didn't do correctly.

Thank you for the response.

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

I need help with semantic HTML and accessibility properties.

Community feedback

  • Adriano•38,250
    @AdrianoEscarabotePosted 28 days ago

    Hi Manisha3196, hope you're doing well! I loved how your project turned out, but I’ve got a few suggestions that could be useful:

    Using Flexbox or Grid on the body to center elements ensures a more responsive and adaptive layout, fitting different screen sizes seamlessly. It avoids manual calculations and constant adjustments needed with margin, padding, or absolute positioning. These techniques provide more consistent alignment and simplify the code.

    flexbox:

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

    grid:

    body {
    display: grid;
    place-content: center;
    min-height: 100vh;
}

    The rest is fantastic.

    Hopefully, you'll find it helpful. 👍

    Marked as helpful
    0
    Manisha3196•120
    @Manisha3196Posted 28 days ago

    Thank you for your feedback.I understood you point.Its really helpful to me @AdrianoEscarabote

    1
  • Dobromir Yordanov•20
    @RelanariaPosted 29 days ago

    Yes the solution does include html semantic.

    1

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