Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted almost 3 years ago

QR-Component Challenge solution

Attrams•130
@Attrams
A solution to the QR code component challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


Please can somebody help explain why when I comment out the "width: 100%;" property of .qr-image in the style.css, the image overlaps.

Code
Couldn’t fetch repository

Please log in to post a comment

Log in with GitHub

Community feedback

  • Hyron•5,870
    @hyrongennike
    Posted almost 3 years ago

    Hi @Attrams,

    Congrats on completing the challenge

    width: 100% basically means take up 100% of the parent container so if you comment it out the image displays normally with no regards of the parent container.

    Hope that is helpful

    Marked as helpful
  • Adriano•42,890
    @AdrianoEscarabote
    Posted almost 3 years ago

    Hi Attrams, how are you?

    I really liked the result of your project, but I have some tips that I think you will like:

    1- Document should have one main landmark, you could have put all the content inside the main tag click here

    2- All page content should be contained by landmarks, you can understand better by clicking here: click here

    We have to make sure that all content is contained in a reference region, designated with HTML5 reference elements or ARIA reference regions.

    Example:

    native HTML5 reference elements:

    <body>
        <header>This is the header</header>
        <nav>This is the nav</nav>
        <main>This is the main</main>
        <footer>This is the footer</footer>
    </body>
    

    ARIA best practices call for using native HTML5 reference elements instead of ARIA functions whenever possible, but the markup in the following example works:

    <body>
         <div role="banner">This is the header</div>
         <div role="navigation">This is the nav</div>
         <div role="main">This is the main</div>
         <div role="contentinfo">This is the footer</div>
    </body>
    

    It is a best practice to contain all content, except skip links, in distinct regions such as header, navigation, main, and footer.

    Link to read more about: click here

    2- Why it Matters

    Navigating the web page is far simpler for screen reader users if all of the content splits between one or more high-level sections. Content outside of these sections is difficult to find, and its purpose may be unclear.

    HTML has historically lacked some key semantic markers, such as the ability to designate sections of the page as the header, navigation, main content, and footer. Using both HTML5 elements and ARIA landmarks in the same element is considered a best practice, but the future will favor HTML regions as browser support increases.

    Rule Description

    It is a best practice to ensure that there is only one main landmark to navigate to the primary content of the page and that if the page contains iframe elements, each should either contain no landmarks, or just a single landmark.

    Link to read more about: click here

    The rest is great!!

    Hope it helps...👍

    Marked as helpful
  • Lucas 👾•104,160
    @correlucas
    Posted almost 3 years ago

    👾Hi @Attrams, congratulations for your first solution!👋 Welcome to the Frontend Mentor Coding Community!

    Great solution and great start! By what I saw you’re on the right track. I’ve few suggestions to you that you can consider to add to your code:

    1.Replace the <h2> containing the main title with <h1> note that this title is the main heading for this page and every page needs one h1 to show which is the most important heading. Use the sequence h1 h2 h3 h4 h5 to show the hierarchy of your titles in level of importance, never jump a level.

    2.Use <main> instead of <div> to wrap the card container. This way you show that this is the main block of content and also replace the div with a semantic tag.

    3.Add a margin of around margin: 20px to avoid the card touching the screen edges while it scales down.

    4.Use relative units as rem or em instead of px to improve your performance by resizing fonts between different screens and devices. These units are better to make your website more accessible. REM does not just apply to font size, but to all sizes as well.

    ✌️ I hope this helps you and happy coding!

    Marked as helpful
  • Vanza Setia•27,715
    @vanzasetia
    Posted almost 3 years ago

    Hello, Attrams! 👋

    Congratulations on completing your first Frontend Mentor challenge! 🎉

    The reason is that the img element has its own width and height. It means that if you remove the width: 100%, the img will be on its original size.

    Regarding img element, I suggest making the img as a block element and setting max-width: 100% to make it easier to work with img element.

    It's good that the site is using a CSS reset. But, I suggest using the "Modern CSS Reset" by Andy Bell. His CSS reset is not only simpler but also focuses on accessibility such as disabling animations for the users who don't prefer to see them.

    Hope this helps!

    Marked as helpful

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

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

How does the accessibility report work?

When a solution is submitted, we use axe-core to run an automated audit of your code.

This picks out common accessibility issues like not using semantic HTML and not having proper heading hierarchies, among others.

This automated audit is fairly surface level, so we encourage to you review the project and code in more detail with accessibility best practices in mind.

How does the CSS report work?

When a solution is submitted, we use stylelint to run an automated check on the CSS code.

We've added some of our own linting rules based on recommended best practices. These rules are prefixed with frontend-mentor/ which you'll see at the top of each issue in the report.

The report will audit all CSS, SCSS and Less files in your repository.

How does the HTML validation report work?

When a solution is submitted, we use html-validate to run an automated check on the HTML code.

The report picks out common HTML issues such as not using headings within section elements and incorrect nesting of elements, among others.

Note that the report can pick up “invalid” attributes, which some frameworks automatically add to the HTML. These attributes are crucial for how the frameworks function, although they’re technically not valid HTML. As such, some projects can show up with many HTML validation errors, which are benign and are a necessary part of the framework.

How does the JavaScript validation report work?

When a solution is submitted, we use eslint to run an automated check on the JavaScript code.

The report picks out common JavaScript issues such as not using semicolons and using var instead of let or const, among others.

The report will audit all JS and JSX files in your repository. We currently do not support Typescript or other frontend frameworks.

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub