QR code using VS code

Community feedback

• 

  Ecem Gokdogan•9,380

  @ecemgoPosted over 1 year 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. :)

  Marked as helpful

  0

  ---

  

  timberstream•40

  @timberstreamPosted over 1 year ago

  thanks. can you help with @media example for this challenge? @ecemgo

  1

  

  Ecem Gokdogan•9,380

  @ecemgoPosted over 1 year ago

  @timberstream

  This solution is already responsive through flexbox and max-width. You don't need media queries in this project.

  In addition to the above, you can remove .bd-background because you don't need it:

  /* 
  .bd-background {
    background-color: hsl(220, 15%, 55%);
    width: 75%;
    height: 80%;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
    min-width: 375px;
  } `
  */
  

  Hope I am helpful. :)

  0
• 

  Sumanth Chandana•720

  @sumanth-chandanaPosted over 1 year 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.

  Marked as helpful

  0
• 

  timberstream•40

  @timberstreamPosted over 1 year ago

  how to use @media query to resize

  0
• 

  EmilianoGomezA•30

  @EmilianoGomezAPosted over 1 year ago

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

  0