Skip to content
Submitted 10 months ago

QR code using CSS grid system

nco0305•10
@nco0305
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

The way how it turned out

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

I could not use and centre the flex box, so I tried the grid as an alternative.

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

Any other alternative ways to create the same component? I can't figure out why the image shows broken in GitHub live page link.

Code

Please log in to post a comment

Log in

Community feedback

  • Account deleted

    Hey, @nco0305! I noticed a few errors in your code that you can improve:

    • Make sure to add <img src="./Images/image-qr-code.png" ...>. This tells GitHub to look for a folder named "Images" in the root directory and pull out the image named "image-qr-code.png" (the period(dot) is important).

    • The box-shadow: 15px; declaration is invalid. Try something like box-shadow: 15px 15px 0 0 blue;. The box-shadow property requires values for offset, blur radius, spread radius, and color; you haven’t set values for all of them.

    • padding: 0, 40px, 40px, 40px; is invalid due to the commas. Replace the commas with spaces, like this: padding: 0 40px 40px 40px;. Remember, padding values follow the order: top, right, bottom, left.

    • When using margin: 0%;, you can simply write margin: 0;. The browser will understand, and this helps save some time.

    Everything else looks perfectly structured. Great job!

    I hope you find this helpful.

    Marked as helpful
  • JL10•260
    @JLizcano10

    Hello, the QR image is not displaying because web servers are usually case sensitive. Currently, you are using a lowercase “i” in the image font:

    <img src=“images/image-qr-code.png” />

    However, the repository folder is named Images with an uppercase “I”. To fix the problem, you can either rename the folder to images or update the image source path in your code to:

    <img src=“Images/image-qr-code.png” />

    This should solve the problem.

    Marked as helpful
  • Meryem El Karati•150
    @Cristal32

    It seems the issue with the image not showing up is the the path:

    In index.html:

    <img src="images/image-qr-code.png" alt="QR Code" width="280" height="280">

    It should be :

    <img src="Images/image-qr-code.png" alt="QR Code" width="280" height="280">

    since the name of the correspondant folder is 'Images' with a capital I

    Marked as helpful
  • Bart Feesley•220
    @antimatterhut

    When I preview your site, the qr picture does not show up.

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