QR Code Component by Watership | Desktop First

Community feedback

• 

  Boots 😺•1,610

  @adityaphasu

  Posted almost 2 years ago

  Hello, @Hyoaku!

  Nice solution! Just some fixes regarding CSS:

  • Try using a CSS reset in your projects like this one to remove all the default styles that the browser applies.
  • Currently due to no CSS reset the browser adds a little bit of margin to the body and hence you can see that there's this scrollbar on the page.
  • Use min-height:100vh on the body instead of height:100vh because using height:100vh would cause the content to overflow and might not be fully visible. On the other hand, min-height: 100vh ensures that card will always be at least the height of the viewport, but it can expand if the content inside requires more space this prevents content from being cut off or inaccessible.
  • Instead of giving the p tags width you can just give the <main> tag width: 17rem and remove the width: fit-content from it.
  • I see you have used rem units in most of the properties but not font sizes so try to use rem to set font sizes as well so that they scale well if it's a scalable layout. (this card doesn't scale but its good practice to use rem for font sizes)

  Apart from these few things good job on the challenge with Vue.js! 🙌🏻 (I also want to try Vue someday haha)

  Keep up the hard work and happy coding!😊

  10

  Marked as helpful