Skip to content
  • Learning paths
  • Challenges
  • Solutions
  • Articles
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted over 1 year ago

Responsive QR code designed using CSS

Sid-sentil•20
@Sid-sentil
A solution to the QR code component challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


  • This project was simple and easy to implement
  • I am unsure of other ways this can be done or made more responsive
Code
Select a file

Please log in to post a comment

Log in with GitHub

Community feedback

  • Melvin Aguilar 🧑🏻‍💻•61,060
    @MelvinAguilar
    Posted over 1 year ago

    Hello there 👋. Good job on completing the challenge !

    • Responsive design aims to ensure that a solution adapts well to various devices. To enhance responsiveness, consider centering your solution using grid or flexbox. The use of a defined padding (padding-top: 15%;) may result in misalignment on different devices, particularly causing the component to appear too low on mobile devices (landscape orientation).

      For Flexbox:

      body {
        padding-top: 15%;
        min-height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        /* Additional styles if needed */
      }
      

    I hope you find it useful! 😄

    Happy coding!

    Marked as helpful
  • P
    Daniel 🛸•44,760
    @danielmrz-dev
    Posted over 1 year ago

    Hello @Sid-sentil!

    Your project looks great!

    This project doesn't need to be responsive because the it doesn't change anything from mobile to desktop version.

    You did a great job!

    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
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub