Skip to content
Submitted over 1 year ago

Responsive QR code component using flexbox and

Saurabh Mishra•80
@Saurabh-Mishra04
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

Hello everyone!

It's been a while since I worked on any projects for almost a year now, due to my school and exams ,so I got stuck at a lot of places. Thankfully I figured out most of them. But if you do notice some error in my code please give a feedback on what I did wrong. Other than that any suggestions on how to improve my code will be appreciated.

Community feedback

  • Hassia Issah•50,650
    @HassiaiPosted over 1 year ago

    Replace the header tag with the main tag to fix the accessibility issues. click here for more on web-accessibility and semantic html

    There is no need to give #card a max-height value

    For a responsive image, give the img a max-width of 100% and a border-radius value, the rest are not needed.

    Give .content a margin value for all the sides, text-align: center and a font-size of 15px which is 0.9375rem, this will be the font-size of both p and h1. Give p a margin-top or h1 a margin-bottom value for the space between the text.

    Hope am helpful.

    Well done for completing this challenge. HAPPY CODING

    Marked as helpful
    1
    Saurabh Mishra•80
    @Saurabh-Mishra04Posted over 1 year ago

    Appreciate the suggestion @Hassiai. I have fixed the issues you mentioned.

    Thank You

    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