QrCode Component using SCSS and Media Query

Community feedback

• 

  Panji•2,090

  @pperdanaPosted over 1 year ago

  Hello there👋!! Congratulations on completing this challange.

  • I have some additional recommendations for your code that I think you'll find interesting and valuable.

  📌 Image element do not have alt attributes or you leave it blank

  for example code

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

  In this code you should add alt in your code

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

  • This alt attribute provides alternative text for images, which is important for accessibility purposes. Screen readers, use the alt attribute to read out loud what the image is about, allowing visually impaired users to understand the content of the page.

  I hope you found this helpful! 😊

  Happy coding🤖

  Marked as helpful

  0

  ---

  

  Gabriel Aroucas•110

  @Gabriel-AroucasPosted over 1 year ago

  I didn't know 'alt' was used for this purpose, I thought it was an additional caption to the image for search purposes. thanks, it was very useful indeed. @Panji200

  0
• 

  Ecem Gokdogan•9,380

  @ecemgoPosted over 1 year ago

  Some recommendations regarding your code that could be of interest to you.

  • You don't need to use media queries for this solution. I'd like to make a few suggestions on how the card will be responsive:
  • In order to center the card correctly, you'd better add flexbox and min-height: 100vh to the body

  body{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
  }
  

  • If you use flexbox in the body, you don't need to use margin in the .container to center the card
  • If you use max-width instead of width, the card will be responsive.

  .container {
    /* margin: auto; */
    /* margin-top: 5%; */
    /* width: 240px; */
    max-width: 240px;
  }
  

  • If you want to make the card responsive and the image will be positioned completely on the card, you'd better add width: 100% and display: block for the img in this way:

  .container .src img {
    border-radius: 8px;
    width: 100%;
    display: block;
  }
  

  • In order to make the card centered vertically, you can reduce the margin of the .attribution a bit:

  .attribution {
     /* margin: 5rem 0; */
     margin: 1rem 0;
  }
  

  Hope I am helpful. :)

  Marked as helpful

  0

  ---

  

  Gabriel Aroucas•110

  @Gabriel-AroucasPosted over 1 year ago

  Thank you very much for the solution, it was very useful. I don't usually apply these measurements to the body but this way it looked much better! thanks.@ecemgo

  1

  

  Ecem Gokdogan•9,380

  @ecemgoPosted over 1 year ago

  @Gabriel-Aroucas I'm happy to help :)

  0