QR code, html css

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.

  ---

  COMPONENT MEASUREMENTS 📐:

  • The width: 100dvw property for main element is not necessary. because it's a block level element which will take the full width of the page by default.

  ---

  • Use min-height: 100dvh for body instead of height: 100dvh. Setting the height: 100dvh may result in the component being cut off on smaller screens.

  ---

  • For example; if we set height: 100dvh then the body will have 100dvh height no matter what. Even if the content spans more than 100dvh of viewport.

  ---

  • But if we set min-height: 100dvh then the body will start at 100dvh, if the content pushes the body beyond 100dvh it will continue growing. However if you have content that takes less than 100dvh it will still take 100dvh in space.

  ---

  .

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

  Happy coding!

  10
• 

  Chukwu Felix•40

  @felixicity

  Posted about 2 years ago

  The code was nicely written. Here are my suggestions:

  • I don't think it needful to add display flex on the card-text. .card .text{ height: 100%; display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; text-align: center; }
  • I think the text align property does the work already since the children elements are block elements.

  10