Skip to content
Submitted over 1 year ago

Responsive QR Code Component

Rahil Pasha•10
@rahilpasha
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

Community feedback

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

    Replace <div class="card"> with the main tag to fix the accessibility issues. click here for more on web-accessibility and semantic html

    to center .card on the page using flexbox or grid instead of position: absolute, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body.

    USING FLEXBOX:
body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}

    USING GRID:
body{
min-height: 100vh;
display: grid;
place-items: center;
}

    Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

    For a responsive content there is no need to give .card a height value and replace the width in .img and .card width max-width.

    Hope am helpful.

    Well done for completing this challenge. HAPPY CODING

    0
  • Akhil-Nagpal•180
    @Akhil-NagpalPosted over 1 year ago

    Hey Rahil! 👋 Congratulations on completing your first challenge! 🥳

    I have a few suggestions:

    To fix all the accessibility errors, you need to change these things in your code.

    • First, every time you start your code always add the <main> tag after the <body> tag. These tags will help to make the code clean and navigation will improve. For Example: If you are making a navbar instead of using the <div> tag, use the <nav> tag for making a navbar.

    Other Suggestions 📝

    • Use Flexbox or Grid for positioning anything on the web page. This will make your code more responsive. 👉 Should we use Flexbox or Grid?
    • Use relative units like em & rem instead of using absolute units like px. This will improve responsiveness. Read this for more understanding 👉 em or rem VS px
    • When you download the starter kit of any challenge, read the Readme file and style guide. These pages will help you to understand what to do.

    I hope these suggestions will help you to improve 😊

    Keep Calm & Keep Coding 💻

    0
  • Tobenna•610
    @tobezhanabiPosted over 1 year ago

    Hi Rahil, You did a nice job. Congratulation on submitting a working task. 🎉🎉

    Here are a few suggestions to the issue with your solution.

    Work on HTML The <div class="card"> should be replaced with the landmark <main>.

    Landmarks in HTML are structural elements that define the major sections of a webpage. They include semantic elements such as <header>, <nav>, <main>, <article>, <aside>, and <footer>

    overall you did a great job

    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