QR Code Component using CSS Flex

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  Hi David Chavez,

  Congratulation on completing another challenge. your solution looks great. I have some suggestions regarding your solution if you don’t mind:

  • line-height: 1.8rem;Use a unitless line-height value to Avoid unexpected results due to inheritance behavior. You can read more in mdn

  Aside these , great work! Hopefully this feedback helps

  Marked as helpful

  0
• 

  Delian21•150

  @Delian21Posted over 2 years ago

  Hello, David. Try using -

  footer{ position: fixed; bottom: 0; width: 100%; height: 60px; }

  I hope that answers your question.

  Marked as helpful

  0
• 

  David•8,000

  @DavidMorgadePosted over 2 years ago

  Hello David, congrats on finishing the challenge!

  I would recommend you to remove the padding from your body and align to the center your component using flexbox on the body like this:

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

  With this you will get your component fully centered by flexbox!

  And to answer your question, if you want to keep the footer at the bottom of the page, you can use position: absolute; bottom: 1rem; and it will push your footer to the bottom of the page without overlapping the content of your component.

  Try those changes and tell me how it goes, I hope this feedback helps you for future challenges too! Good job.

  Marked as helpful

  0

  ---

  

  David Chavez•190

  @codeDavidCPosted over 2 years ago

  @DavidMorgade Thanks for your insight! Ill make the necessary changes. 👍

  1