Skip to content
Submitted over 2 years ago

QRCode_FrontendMentorChallenge

Kenzar•70
@Kenzar-San
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

The only issue is the image not appearing on the live site.

Community feedback

  • Travolgi 🍕•31,400
    @denieldenPosted over 2 years ago

    Hi Kenzar, great work on this challenge! 😉

    Here are a few tips for improve your code:

    • the image is broken because the url is wrong, fix like this: <img alt="" src="./images/image-qr-code.png">
    • add main tag and wrap the card for improve the Accessibility
    • remove all margin from container class because with flex they are superfluous
    • add justify-content: center flexbox property to the body to center the card horizontally
    • instead of using px use relative units of measurement like rem -> read here

    Overall you did well 😁 Hope this help!

    Marked as helpful
    0
    Kenzar•70
    @Kenzar-SanPosted over 2 years ago

    @denielden Good afternoon, Deniel. Thanks for the help with the image issue. The <main> tag was giving issues with the position of the <div>, so I stopped using. Removing the margin of <div container> tag was putting on the left and now on the center of the site, so I still using it. Don't know if you want me to only add the justify-content: center, but it didn't change nothing for me, you want to add the flexbox property together? I'm going to trying use more the rem measurement, thanks for the tip.

    Thanks for the tips, really glad for the help.

    1
  • Andy•520
    @AndyAshleyPosted over 2 years ago

    Hey Kenzar, good job on the challenge! I found your issue with the image. When I go to inspect the page and add a . in front of your image path everything works fine :) .

    You have /images/image-qr-code.png . Just change it to ./images/image-qr-code.png , or remove the / altogether, and it will pop right up. It couldnt find the path within the folder hierarchy. Check out w3 Schools HTML File Paths

    You can also clear up the Accessibility issues by wrapping your content within the body in a <main> tag or other appropriate landmark tag. For the <h1> issue, throw your main header text into an <h1> instead of an <h2> tag. You can style this to reduce the font size if you need to. Happy coding and hope that helps!

    Marked as helpful
    0
    Kenzar•70
    @Kenzar-SanPosted over 2 years ago

    @AndyAshley Good afternoon, Andy. Thanks for helping with the image issue, I tried <main> tag after <body>, but It just didn't let the <div> go to the mid-screen. I was tried for hours tried to figure out why it wasn't working, and the problem was the <main> tag, so I just ripped from the code.

    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