Skip to content
OverviewSolutions
16
Comments
5

Jordan Kleinbaum

@JordanKleinbaum210 points

B.B.A in Computer Information Systems @ James Madison University | Aspiring Front-End Developer | HTML, CSS & JavaScript Experience

I’m currently learning...

React.js using the Vite build tool & JavaScript

Latest solutions

View more solutions

Latest comments

  • Jordan Kleinbaum•210
    @JordanKleinbaumPosted over 1 year ago

    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!

    0
  • Jordan Kleinbaum•210
    @JordanKleinbaumPosted over 1 year ago

    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
    0
  • Jordan Kleinbaum•210
    @JordanKleinbaumPosted over 1 year ago

    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
    0
  • Jordan Kleinbaum•210
    @JordanKleinbaumPosted over 1 year ago

    Great job! Practice makes progress!

    0
  • Jordan Kleinbaum•210
    @JordanKleinbaumPosted over 1 year ago

    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)

    0