Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted about 1 year ago

QR code component using margin auto and padding

P
mrcordova•1,360
@mrcordova
A solution to the QR code component challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


What are you most proud of, and what would you do differently next time?

I like how the card itself turned out. All the elements lined up nicely. I would probably work on centering the card better.

What challenges did you encounter, and how did you overcome them?

I was having trouble rounding the corners of the image because I originally put the image in a `````` element and that was not showing the rounded corners. To fix this issue I removed the div element.

What specific areas of your project would you like help with?

How should I go about centering elements vertically so it's always centered.

Code
Select a file

Please log in to post a comment

Log in with GitHub

Community feedback

  • Grace•32,130
    @grace-snow
    Posted about 1 year ago

    This is the time to focus in on learning html well.

    1. All content should be contained in landmarks. The card should be in a main and the attribution in a footer.
    2. The card could be a section if you want but there shouldn't be a section within it. (The heading and paragraph actually don't need wrapping in any extra element if you want).
    3. Make sure the alt text on the image is descriptive enough. This needs to say what the image is (QR code) and where it goes to (to FrontendMentor.io).
    4. I recommend you include the css reset at the start of your styles. There's no need to make an extra server call for a whole other file.
    5. To center the component on the screen make the wrapping element (eg body in this challenge) a flex column, min height 100svh and use flex properties to center its children.
    6. The card must not have a height. Never limit the height of elements that contain text. This will currently break for users with a different text size or if authors included more content in a card. Let the browser do it's job and decide what height is needed based on the content inside the card.
    7. The component should not have a width either (unless 100%). It should have a max width in rem. This allows the card to shrink narrower when viewed on a small screen and using rem means it will scale correctly even if site visitors have a larger default text size.
    8. Font size must never be in px
    9. Using percentage for padding takes away all.of your control of the layout. Use px or rem.
    10. The margins left and right on the paragraph seem strange... I can't think why they are there or have different values. It would be more usual to have max width in ch units and margin-inline auto for centered text if you wanted to limit its width in some way... But Im not sure what the intention was there.
    Marked as helpful
  • Adriana•20
    @adabo4
    Posted about 1 year ago

    Nice design with clean code!

  • Darren Ogola•60
    @Ogo1A
    Posted about 1 year ago

    yes it does.i want to learn and practice more all the time.improve on semantic tags

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.

Frontend Mentor for Teams

Frontend Mentor for Teams helps companies and schools onboard and train developers through project-based learning. Our industry-standard projects give developers hands-on experience tackling real coding problems, helping them master their craft.

If you work in a company or are a student in a coding school, feel free to share Frontend Mentor for Teams with your manager or instructor, as they may use it to help with your coding education.

Learn more

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