Skip to content
Submitted over 1 year ago

QR Code Component Using Plain HTML and CSS

Venktesh Kaviarasan•20
@Venktesh-Kaviarasan
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Difficulty while building project?

  • Found it hard to find alignments of flex items

Areas of code I was unsure of

  • Reisizing browser for accomodating different devices to display component.
  • Flex item alignments
Code
Couldn’t fetch repository

Please log in to post a comment

Log in with GitHub

Community feedback

  • Dimitar Radev•930
    @Mitko90

    Hi, nice solution. 👍️

    I have some suggestions regarding your questions and more.

    • There is no need for position: relative on this project.

    • In order to center the card to the screen, you can do this

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

    • There is no need for setting width and height to the body because it only messes it up in this case.

    • There is no need for adjusting to mobile size because the component is small enough to be perfectly visible on phone and computer. You can give the card a max-width of let's say 310px or so, and you should be fine.

    • Rely on margins to separate the text blocks, rather than positioning. Give the card a small padding and you will be on the right way.

    • Here is a link to my submission to this challenge, maybe you can look at my (or other users') code.

    Keep up the good work and happy coding. Hope I was helpful. 👍️

    Marked as helpful

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