@BotAldaris
Jordan Kleinbaum
@JordanKleinbaumAll comments
- @JordanKleinbaum
Great job! Everything looks great. Just from a UX perspective, it is a little redundant to have the orange carrot to the right as well as the black one to the left. Besides that, everything looks good!
- @billynguyen25@JordanKleinbaum
Also for your image not loading, I had the same problem. Make sure you use the exact right file path in your html head section when linking your css. Read this for more help
Marked as helpful - @billynguyen25@JordanKleinbaum
Here are a couple ways to Center A DIV:
-position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
-display: grid; place-items: center; min-height: 100vh;
-display: flex; align-items: center; justify-content: center; min-height: 100vh; width: 100%;
-position: absolute; inset: 0; margin: auto;
Putting any one of these 4 methods in your body section of your css should center whatever you start making :)
Marked as helpful - @Gary068@JordanKleinbaum
Great job! Practice makes progress!
- @Gemgabriel1@JordanKleinbaum
I also had this problem too. I tried a bunch of solutions, but the one that worked for me was creating the shortest possible file path to your image. For example I see in your code that you linked it like this "<img src="C:\Users\hi\Desktop\qr-code-component-main\images\image-qr-code.png" alt="qr code" class="qr-code">"
That finds the image by using the root of your files, and then going all the way through the path to the image. In my code, I linked my image like this "<img src="images/image-qr-code.png" alt="QR Code Image" class="pic" />". Both ways (how you did it and how I did it) are technically fine, but it's always good to make your code as manageable as possible for others and the computer.
Here is a link to my repo where you can see all of the code. https://github.com/JordanKleinbaum/QRCodeFrontEndMentor/blob/main/index.html
Shorten the link to your image and see if that changed anything! (ps, github pages also takes a few minutes to update everything)
