Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted over 2 years ago

"Responsive" qr code

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

Solution retrospective


Hey guys, thanks for watching my project and for any suggestion! I have one main question, i couldn't use flex display to perfectly center the image vertically (align content: center, even if i added it) because after checking i saw that the body didn't cover the entire page, so the image was basically centered because the body height was exacly like the main height.. i had to add a padding to the body bottom and vertically move the rest down with the top margin.. i tried to add 100% height and width to the body without results.. anybody knows how to fix it? thanks everybody in advance, and happy coding!

Code
Select a file

Please log in to post a comment

Log in with GitHub

Community feedback

  • Account deletedPosted over 2 years ago

    You can try setting height of body to 100vh and width to 100vw. This will allow the body to take up the entire viewport and you can then center the card using flexbox. I did something similar in mine. You can check it out here: https://github.com/fahadimran11/qr-component-design. I can also open up a pull request in your repository if you'd like. Hope this helps!

    Marked as helpful
  • Aliyu-Saidu•220
    @Aliyu-Saidu
    Posted over 2 years ago

    Nice work @Ripra87. Here are some suggestions to improve your code.

    • To answer your questions, consider setting the width and height of the 'body' element to say 100vw and 100vh respectively. Then remove the padding and margin hack you used above. Please always avoid setting your 'body' element height in percentage. This may give you unwanted results as you saw above.
    • For proper outline of your documents or website. Always start the first heading in your webpage with a level one (h1) element. Yes this challenge may just be (in real sense) a component of your website but as this is the only thing you have on your webpage, you should consider using h1 instead of the h3 you used in your code. This should solve the accessibility report warning you had above.

    If you need more help or want to discuss this further, please feel free to contact.

    Hope this helps?

    If yes, you may consider hitting the helpful button below. Thanks!

    Marked as helpful
  • pewpewhamster•70
    @gian-noche
    Posted over 2 years ago

    Hello @Ripra87! Congratulations on finishing the challenge!

    I can't directly answer how you could've centered the image as you asked because I couldn't follow the sequence of the code.(I just finished this challenge as well :sweat_smile:) But I can share a small tip.

    I checked out your code and noticed that you used flex without declaring the flex-direction . By default, flex's direction is row, which puts the elements side by side. But for this challenge, you have to put them on top of each other so flex-direction: column; would've been a great start and would save you a lot of hassle. You can try this:

    body {
        background-color: hsl(212, 45%, 89%);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
    }
    
    main {
      width: 375px;
      background-color: white;
      padding: 2rem;
      text-align: center;
    }
    
    img {
      width: 100%;
    }
    

    Try changing the width of your main and everything should still stay centered. I hope that helps.

    Again, nice job on finishing the challenge!

  • Ric•210
    @Ripra87
    Posted over 2 years ago

    Thank both guys it works )) i used vw and now is centered, but i had to set the body height at 50vw, with 100 is double size and i have to use the scroll bar :P For Aliyu-Saidu i used the h3 only because looking at the font size in the pictures it looked so small, but i could anyway use the h1 and resize it, right ) About the percentage, i read somewhere that is always better to use percentage or em (or rem for children) because it makes the page more responsive, with the px it doesn't happen, isn't it right?

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
Frontend Mentor logo

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