Skip to content
Submitted over 2 years ago

QR code component

Karthigeyan K•10
@Karthigeyankiruba
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

I faced difficulty to responsive the page

Community feedback

  • Vanza Setia•27,775
    @vanzasetiaPosted over 2 years ago

    Hi, Karthigeyan! 👋

    Congratulations on completing this challenge! 🎉

    This is already a good start. But, you can do some improvements to make it fully responsive.

    • The card only needs a max-width to be responsive. For, the height, let the elements inside it control the height. For the width, it won't allow the card to shrink if needed. So, by setting max-width, you allow the card to shrink if ever needed.
    • I recommend making the body element as the flex container to make the card in the middle of the page regardless of the users' device. Using margin is not making it to "actually" in the middle of the page. But, by making the body element as a flex container and set min-height: 100vh, it will make the card always in the middle of the page.
    • I suggest adding some padding on the body element to prevent the card from filling the entire page or touching the edges of the screen.
    • I suggest making the img as block element and set max-width: 100% to make it easier to work with img element.

    Lastly, I suggest fixing all the issues that have been reported.

    That's it! I hope this helps you making the site fully responsive. 😊

    1
  • javascriptooo•310
    @javascriptoooPosted over 2 years ago

    Given the accessibility issues -- you need to include at least the <main> landmark.

    The <main> landmark tag can be inserted around your content inside the <body>. Here is some documentation

    Adding the <main> landmark will remove 2 accessibility issues! :)

    Also, with accessibility, you cannot skip headings. Change your h3 tag to an h1 and stylize the text from there. Headings are used by screen readers for people to navigate the page. An H1 is the main topic. So users can jump to it. If you have multiple headings, the user can skip them in screen readers.

    That should take care of the final accessibility issue.

    Check out this Headings Documentation

    Hope that helps! Great work!

    Steven

    0

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