Flexbox css, html

Community feedback

• 

  Leon Pahole•480

  @leonpaholePosted almost 2 years ago

  Hey there, here are a couple of things I've noticed in your project:

  • The code is simple and clear.
  • The font-family is set as "system-ui, 'Outfit', sans-serif ...". The way how this works is that the first font that is available in the system for a specific glyph will be taken. This means that system-ui has priority over Outfit and in my case it renders instead of Outfit. If you'd like to have Outfit font whenever possible, you should swap these two. Read more here: https://linuxhint.com/css-font-fallbacks/
  • The page has a little bit of scroll even when there is enough space for the component to appear. Even though you set the main component to be 100vh of height, the padding is not accounted in. This behavior can be changed by changing the box-sizing property. Read more here: https://css-tricks.com/box-sizing/
  • Setting 100vh height can cause issues if the screen is resized to the height that is lower than the QR component (I suggest you try it yourself). It is usually recommended to set min-height instead of height so the content can expand past the height if need be.
  • You used height: fit-content, which is a relatively new property value. I suggest that you always check if browsers support the properties. You can use "Can I use": https://caniuse.com/?search=fit-content
  • The code doesn't appear to be formatted. I suggest that you use Prettier to format the code in a consistent manner. This can save you a lot of issues especially when working in a team and everyone has a different code style.
  • You have styles for .attribution both in the css file and style tag in the HTML. I suggest you unify these in one place, as scattered code that refers to the same thing can negatively impact readability.

  Marked as helpful

  0

  ---

  

  Thabiso•270

  @SefalaThabisoPosted almost 2 years ago

  @leonpahole Thank you so much for the feedback. As a beginner i really appreciative your advice. I will improve my code and re-upload it

  0