Skip to content
Submitted over 1 year ago

Responsive QR code component

Shashank Hiremat•90
@shank-codes
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

  1. Is it ok to use absolute positioning css property when it serves the purpose.

Community feedback

  • Mohammed Abbas•390
    @Mohammedabbas7Posted over 1 year ago

    Congratulation on completing this challenge, well done 🎉🎉🎉.

    First, regarding your question, it's okay to use position absolute property when it needs it but in this scenario, you did not need it.

    Second, I guessed that you used position absolute to center the card in the middle of the screen this better way to center the div is by using flexbox, here is:

    HTML

    • create a div with a class of container inside the body element.
    • inside that container create a div with the class of card to hold the content of the card.
    <body>
    <div class="container">
        <div class="card">
        <div>
    <div>
</body>

    CSS

    • add this style to the container to center the card.
    .container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

    You can test this code and tell me if it works for you instead of using the position absolute property.

    If you don't know about flexbox watch this video by Kevin Powell.

    Happy coding :)

    Marked as helpful
    1
    Shashank Hiremat•90
    @shank-codesPosted over 1 year ago

    @Mohammedabbas7 It totally worked, Thank you so much

    0
  • Steve•1,170
    @peanutbutterjllyPosted over 1 year ago

    hey @shank-codes 👋,

    its ABSOLUTELY ok to use absolute positioning if you need it.

    the only reason I think its shunned nowadays is because there's other ways of getting content where you want it 'easier' (think grid and Flexbox).

    less absolute positioning with modern css

    good job with your solution! keep up the good work

    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