Skip to content
Submitted 2 months ago

QR Code Component using Flexbox

silveraditya•100
@silveraditya
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 challenges did you encounter, and how did you overcome them?

Using Figma was challenging and I wasn't able to figure out how to get correct dimensions from Figma - so I ended up estimating the sizes as opposed to being fully precise about it.

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

Look at my CSS to ensure that I have properly implemented the solution.

Community feedback

  • MikDra1•6,980
    @MikDra1Posted 2 months ago

    Good job! Here are some things to review:

    • Setting background-color: lightgrey; on the <body> tag is a good start for defining a neutral background. However, using lighter colors might cause low contrast with certain text or elements, potentially affecting accessibility. Make sure to check your color contrast for readability.

    • The .container class uses display: flex; to center elements both horizontally and vertically with justify-content: center;and align-items: center;. This is a great way to ensure that content stays centered regardless of screen size. Just keep in mind, using height: 100vh; might cause issues on mobile devices where the address bar or bottom controls can push elements off the screen. Instead you can use min-height: 100vh;.

    • The .content class uses width: fit-content; which is useful for making the content box dynamically adjust based on its contents. However, be mindful of scenarios where content could overflow. Consider adding max-width to handle such cases gracefully on smaller screens.

    • Using border-radius: 10px; on both the .content class and img tag is a nice touch for giving your elements a soft, rounded appearance. Rounded corners can improve the visual appeal and provide a more modern look.

    • The .desc class has opacity: 50%;, which is fine for creating a subtle effect, but it may negatively impact readability for users with visual impairments. Consider using a darker shade with full opacity or improving contrast to maintain clarity while achieving the same visual effect.

    • Avoid using fixed sizes like px—for example, on font sizes or padding. Instead, use responsive units like rem or em to ensure that your design scales better across devices. For instance, setting font-size: large; in .header can be replaced with a more flexible rem unit to adapt to different user settings.

    • Avoid commenting out code indefinitely, like the .box class in this case. If it's not being used, it's better to remove it. Commented-out code can clutter your stylesheets and make maintenance harder as your project grows.

    Hope you found this comment helpful 💗💗💗

    Good job and keep going 😁😊😉

    Marked as helpful
    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