Skip to content
Submitted 6 months ago

A qr-code page designed using plain css

Levi Mwendwa•30
@levit3
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 are you most proud of, and what would you do differently next time?

I am proud that I was able to do this without any frameworks as I have been struggling a bit with plain css. I would like to use frameworks like bootstrap or tailwind css next time.

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

I could not center the qr code elements to the center of the page. I managed to center it horizontally using flexbox but failed to do so vertically.

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

Centering of components on the page for it to also be responsive on mobile screens

Community feedback

  • Raphael Bröderbauer•790
    @DigitaleWeltLibraryPosted 6 months ago

    Hey, good soluten but i have some points for improvment.

    • For centering the card vertically too, you have to set up a height.
    body {
  min-height: 100dvh;
}
    • Never use a fix width. If you want to make the card responsive then use the min function, it will always use the lower width. When the width of the screen is lower than 350px the card get a width of 90dvw. (Learn about the min function)
    #container {
    width: min(350px, 90dvw);
}
    • Making the image responsive too. Firstly i give it a width of 90%. Then i want every side of the image the same size and therefore i use aspect-ratio. Lastly i center the image with margin. (Don´t forget the display: block; for it)
    img#qr-code {
    /* position: relative; */
    /* margin: 17px; */
    aspect-ratio: 1 / 1;
    width: 90%;
    margin: 1rem auto;
    display: block;
}

    My solution of the challenge.

    I hope i could help you to improve your skills. 😉 Happy coding 😊

    0
  • Koda👹•3,830
    @kodan96Posted 6 months ago

    hi there! 👋

    You can center your content using Flexbox if you apply these to the body tag:

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

    Hope this was helpful🙏

    Good luck and 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