Skip to content
Submitted over 1 year ago

Responsive QR-code component using CSS Flexbox

Ur_dad•10
@Ur-dad24
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

Hey friends, I am happy to complete this small challenge as my starting point on frontendmentor.io. While building this project, I kind of freaked out on centering the qr-code container, vertically. But after a few tweaks with css, I was able to freely move it up and down by setting a min-height to the container of the qr-code. Unsure if that was a good solution. Are there better ways I could have done this?

Your feedback will be highly appreciated.

Community feedback

  • Oscar Bocanegra•235
    @obocanegra-devPosted over 1 year ago

    Hello @Ur_dad! 👋

    Congratulations on completing your first challenge! 🎉 You did a great job, and I'm really impressed with your work.

    Here are some suggestions to further enhance your project:

    First of all, I recommend moving the inline styles from your HTML and creating a separate CSS file. You can then link this CSS file in your HTML. This will help keep your code organized and make it easier to maintain and update your styles.

    I highly recommend using semantic elements instead of relying heavily on <div> elements. Semantic elements like <header>, <nav>, <main>, and <footer> provide meaning and structure to your HTML, improving both accessibility and SEO.

    For the image, it would be even more descriptive to use "QR code to Frontend Mentor website" instead of just "QR code". This will provide clearer context and enhance the accessibility of your site.

    Avoid using a fixed width for your container as it hampers responsiveness. Instead, consider using max-width to allow your container to adjust fluidly to different screen sizes.

    Set the min-height of your container to 100vh to ensure that it fills the entire viewport and is vertically centered. This will improve the overall appearance and user experience.

    Remember to avoid using pixel units for font sizes. It's better to use relative units like rem or em. This ensures that your font sizes are responsive and adapt well to different devices and user preferences.

    Keep up the fantastic work and continue challenging yourself! I'm confident that you'll achieve even greater results in your future projects. Best of luck! 💪🚀

    If you have any questions or need further assistance, feel free to ask. Enjoy your coding journey! ✨😊

    Warm regards, Oscar

    Marked as helpful
    2
    Ur_dad•10
    @Ur-dad24Posted over 1 year ago

    Hi @obocanegra-dev.

    Thank you so much for your invaluable and insightful feedback. I will implement the suggestions to better my code.

    Regards, Yobu.

    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