Qr-code component

Community feedback

• 

  Victor Resines•110

  @VictorResinesPosted almost 2 years ago

  Hi @roxana-lupu!

  I just did this challenge on the weekend =)

  I noticed is that the shadow for the card is missing.

  To achieve this you could add a box shadow on your .card_container

  I used the following parameters: box-shadow: 0px 20px 30px 10px rgba(0, 0, 0, 0.05);

  These values refer to: offset-x | offset-y | blur-radius | spread-radius | color

  You can fin out more about box shadow >here

  Hope you find these feedback helpful! Everything else looks good to me, happy coding!

  0
• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  Replace <div class="box"> with the main tag and <h2> with <h1> to fix the accessibility issues. Give .box a fixed width value instead of percentage width value. Replace the width of .box with a max-width for a responsive content. e.g.:

  .box{
    max-width: 320px ;
    }
  

  Give .qr-code-img a max-width of 100% instead of width 100%

  To center .box on the page, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body.

  Use rem or em as unit for the padding, margin, width and preferably rem for the font-size for more on this watch this https://youtu.be/N5wpD9Ov_To

  Hope am helpful. HAPPY CODING

  0
• 

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  Hey there! 👋 Here are some suggestions to help improve your code:

  Congrats on completing your first challenge!🎊🎆

  • Do not forgot to check your FEM report, to see what is incorrect and update your code with it.

  • It is best practice to have separate files for you HTML and CSS code. It helps keep things organized and make it easier to maintain.

  • The alt tag description for the “QR image” needs to be improved upon. Its needs to tell screen reader users what it is and where it will take them to when they scan it.

  • Do not use percentages for your component's container as it cause it to grow/shrink indefinitely, which will cause your component to warp.

  • To properly center your content to your page, you will want to add the following to your body element (this method uses CSS Grid):

  body {
      min-height: 100vh;
      display: grid;
      place-content: center;
  }
  

  More Info:📚

  [Centering in CSS][https://moderncss.dev/complete-guide-to-centering-in-css/]

  • Change width to max-width in your component’s container to make it responsive.

  If you have any questions or need further clarification, feel free to reach out to me.

  Happy Coding!🎄🎁

  0