QR code using CSS Flexbox

Community feedback

• 

  Abdul Khaliq 🚀•72,380

  @0xabdulkhaliq

  Posted about 2 years ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  ---

  CSS 🎨:

  • Looks like the component has been centered properly. But the issue is the content inside the body causes overflow on smaller screens and let people scroll the content, this issue want to be cleared.

  ---

  • This is just caused by over default margin applied by browsers, we can use margin if necessary but in this project there's no need to use it

  ---

  • Now set margin forbodyin css, after setting you can able to see the changes

  body {
     margin: 0;
  }
  

  ---

  ---

  • Now the overflow of content has been cleared

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  01

  Marked as helpful
• 

  Hassia Issah•50,390

  @Hassiai

  Posted about 2 years ago

  To center the main on the page using flexbox, replace the height in the body with min-height: 100vh.

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

  For a responsive content,

  • Replace the width in the main with a max-width and the height with a padding value for all the sides. padding: 16px which is 1rem/em
  • Give the img a max-width of 100% and a border-radius value, the rest are not needed.

  Give h1 and p text-align: center, the same margin-left, margin-right and margin-top values. Give p a margin bottom value.

  Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  01

  Marked as helpful