Skip to content
Submitted over 2 years ago

QR code component solution using CSS Grid and Flexbox

Aliyu-Saidu•220
@Aliyu-Saidu
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

1- Please help. My finished project is not displaying correctly from the github live site url above! At first I forgot to include the image file in my file uploads but later added it in the github. I tried to refresh the page but did not work even though the finished project is now displaying correctly in my laptop after updating the file path in the 'src' attribute in the source code.

2- I am getting the following errors and whenever I try "git add ." in Git Bash. So I couldn't add, commit and push my codes from local machine to git hub. I had to resort to manual method! I have the following file types in my folder: .png, .gitignore, .html, .md and .css

warning: in the working copy of '.gitignore', LF will be replaced by CRLF the next time Git touches it error: unable to write file .git/objects/d1/3464af54e87679bf87e20754a35abe51dc4449: Filename too long error: .gitignore: failed to insert into database error: unable to index file '.gitignore' fatal: adding files failed

Now questions related to the project

1- I find it difficult to control the size of the image in its container using only template-columns and template-rows properties in grid without specifying image size in any unit. Please how best should I do it?

2- Please what is the difference between section, article and aside semantic tags in html?

Code

Please log in to post a comment

Log in

Community feedback

  • michaelbulaongdev•170
    @michaelbulaongdev

    Hi,

    Looking at your repository, the image file is located in your root folder. However, in your index.html, it is still routing from the "images" folder.

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

    Either add an "images" folder in your repository root then move the image file into that folder, or edit the <img src=""> in your index.html in order to fetch the image file from the correct address.

    Then re-run the build to deploy changes in your live site.

    I hope this feedback helps.

    Happy coding! :)

    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