Basic html e Css(Flexbox)

Community feedback

• 

  Ecem Gokdogan•9,380

  @ecemgoPosted over 1 year ago

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

  • In order to center the card correctly, you'd better add min-height: 100vh to the body
  • If you want, you can use the recommended color for the background:

  body{
     /* flex-direction: row; */      /* you don't need this */
     min-height: 100vh;
     /* background-color: rgba(131, 166, 231, 0.548); */
     background-color: hsl(212, 45%, 89%);
  }
  

  • If you use flexbox, you don't need to give margin to the .qr_code in order to center the card because flexbox already provides it. Additionally, the flexbox here doesn't work, so you can remove it.
  • You can update padding of the card and give a max-width to the .qr_code. If you use the max-width, you don't need media queries for this solution because it makes the card responsive. If you want, you can delete media queries.

  .qr_code {
     /* display: flex; */
    /* flex-direction: column; */
    /* align-items: center; */
    /* margin-top: 10vh; */
    /* padding: 15px; */
    /* padding-left: 15px; */
    /* padding-right: 15px; */
    padding: 15px 20px 30px;
    max-width: 280px;
    text-align: center;
  }
  

  • You can update the style of image as I suggest, so the image will be positioned completely on the card

  .qr_code img {
    /* width: 240px; */
    width: 100%;
    height: 100%;
    display: block;
  }
  

  • Finally, I don't recommend you to give width to text for this solution, you can remove them:

  .qr_code .first_p {
    /* max-width: 220px; */
  }
  
  .qr_code .second_p {
    /* max-width: 200px; */
  }
  
  

  Hope I am helpful. :)

  0

  ---

  

  Zakaria Jamali•140

  @ZakJamPosted over 1 year ago

  @ecemgo Hi, I just wanted to thank you for taking the time to provide me with valuable feedback on my solution for the exercise. I found your comments very helpful and they helped me better understand how to improve my work.

  Thank you again for your help and for sharing your knowledge with me.

  1

  

  Ecem Gokdogan•9,380

  @ecemgoPosted over 1 year ago

  @ZakJam I am happy that my feedback is helpful. I appreciate your nice words. :)

  0