QR code using VS code

Community feedback

• 

  Ecem Gokdogan•9,380

  @ecemgo

  Posted about 2 years ago

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

  CSS

  • If you want to center it correctly, you can use flexbox in the body:

    body {
    /* padding: 20px;	 */
    /* max-width: 1440px; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: hsl(212, 45%, 89%);  // the recommended background-color
    }
  

  • secondly, you don't need .bd-background anymore, you can remove it
  • you also need to remove margin-top and margin-bottom because of the flexbox which is used in the body
  • also, you want to adjust the card depending on mobile size, you can use max-width

  .text-container {
    background-color: hsl(0, 0%, 100%);	
      margin-left: auto;
      margin-right: auto;
      padding: 10px;
      /* width: 20%; */
      /* height: 20%; */
      /* margin-top: 100px; */
      /* margin-bottom: 100px; */
      border-radius: 10px;
      max-width: 220px;   // max-width makes it responsive
      min-height: 275px;
    }
  

  • finally, if you want the .attribution at the bottom

   .attribution {
      text-align: center;
      position: fixed;
      bottom: 0;
    }
  

  Hope I am helpful. :)

  02

  Marked as helpful
• 

  Sumanth Chandana•720

  @sumanth-chandana

  Posted about 2 years ago

  Hi mate! congrats on completing the challenge. I have suggestions from my side that may help you:

  • Use background-color on the whole body, not on the container.
  • An <img> must contain an alt attribute by default so that screen readers might know the element present over there.
  • Use @media queries to resize the HTML elements in your page, for more on that click here

  I hope my feedback will help you.

  00

  Marked as helpful
• 

  timberstream•40

  @timberstream

  Posted about 2 years ago

  how to use @media query to resize

  00
• 

  EmilianoGomezA•30

  @EmilianoGomezA

  Posted about 2 years ago

  Hello!, what problem do you have in the mobile version?

  00