Skip to content
Submitted 4 months ago

Used flex-module and relative units to avoid using media queries

ITS•50
@ink1982
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

I was able to avoid using media queries by leveraging relative units, making the design adaptive without the need to specify separate rules for different devices. By using units such as em, rem, %, and vh/vw, I ensured that elements on the page automatically adjusted to the screen size. This simplified the code significantly and made it more versatile for various screen sizes, while maintaining proportions and providing a user-friendly interface.

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

No help needed on this project, thank you.

Code

Please log in to post a comment

Log in

Community feedback

  • Agidza•20
    @lynnagidza

    Great job on nailing the design! Your design is completely symmetrical with the reference design. Good job! 👏🏿

    Code Structure

    Strengths

    • Proper use of classes for styling
    • Good implementation of responsive design principles

    Suggestions for Improvement

    • Consider moving your CSS to a separate file instead of using internal styling as it improves maintainability as projects grow.
    • Try incorporating semantic HTML5 landmarks(header,nav,main,footer) instead of generic divs. For example:
    <body>
  <main class="qr">
    <!-- QR code content -->
  </main>
</body>

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