Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

QR Code Component

@Mishywayu

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I found it difficult to deploy the project on GitHub pages. Though I managed my way through. However, once I click the live site URL, the image is not displayed in the browser. I have tried looking for the solution to it but found none. Anybody help please.

Community feedback

@SteveNoyes

Posted

If you change your background image in your css it will show your image. The file path just needs a period. background-image: url(./image-qr-code.png); CSS Line: 22

0

@Mishywayu

Posted

@SteveNoyes Hello, I have made the change and pushed the changes. Still the image is not displayed.

0

@trackerMGN

Posted

@Mishywayu hello nice solution. my tip would be. remove the backslash from the style attribute. your code reads: background-image: url(./image-qr-code.png) have it as background-image: url("image-qr-code.png") since the image is in the same root directory

1

@Mishywayu

Posted

@trackerMGN Hello, thank you for your solution. I tried the first solution by @SteveNoyes and it worked. Turns out I had to give the browser a little more time for the image to load. Thank you.

1

Please log in to post a comment

Log in with GitHub
Discord logo

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