qr-code-component

Community feedback

• 

  hitmorecode•6,760

  @hitmorecodePosted about 1 year ago

  The image is not showing because the path of the image does not exist. <img src="/images/image-qr-code.png" alt="image-qr-code" width="300" height="300"> this is what you have

  <img src="image-qr-code.png" alt="image-qr-code" width="300" height="300"> you should change it to this.

  Try not to style the image in the html file, do this in the css file. Remove the width and height.

  body {
    display: flex;
    align-items: center;
    flex-direction: column;
    background-color: hsl(217, 36%, 64%);
    font-family: Outfit;
    min-height: 100vh; /* add these two lines. this will help place the card in the middle of the page */
    justify-content: center;
  }
  
  .container {
    display: flex;
    align-content: center;
    flex-direction: column;
  /*   margin-top: 7em; */ /* remove this line, this is not necessary */
    padding: 1em;
    background-color: white;
    border-radius: 1em;
    width:350px; /* change the width of the card to this */
  }
  
  /* remove whats commented out */
  /*.card-img change this to just img */ img {
    display: block;
  /* margin-left: auto; */
  /* margin-right: auto; */
    width: 100%;
  /* height: auto; */
  }
  
  

  Marked as helpful

  0

  ---

  

  chombef81•10

  @chombef81Posted about 1 year ago

  that is all so helpful thank you@hitmorecode

  0

  

  hitmorecode•6,760

  @hitmorecodePosted about 1 year ago

  @chombef81 glad I could help

  0
• 

  trustesc•20

  @trustescPosted about 1 year ago

  Hi, the QR Code image is not visible. This is because your github repository doesn't contain a folder with the images. Seems you copied all the files into the main directory. To solve this you can either add the original images folder to your repository or you change src="/images/image-qr-code.png to src="/image-qr-code.png in your code.

  0