QR Code Component

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted over 1 year ago

  Hello there 👋. Good job on completing the challenge !

  I have one suggestion about your code that might interest you.

  • Use min-height: 100vh instead of height. Setting the height to 100vh may result in the component being cut off on smaller screens, such as a mobile phone in landscape orientation.

    screenshot-imgur (landscape mode)📸

  I hope you find it useful! 😄 Above all, the solution you submitted is great!

  Happy coding!

  0

  ---

  

  lemonsprig•40

  @lemonsprigPosted over 1 year ago

  @MelvinAguilar Thanks for the tip. I have made the change, but looking at it before and after on a landcape mobile phone I can see no real differece. I still get the top and bottom cut off but can scroll it.

  0

  

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted over 1 year ago

  @lemonsprig It is very true, the reason it does not affect is because you have used Percentage-based heights of the CSS reset, you have two options either delete that line of code to leave it with vh units, or modify the values a bit.

  Using percentage-based heights:

  html { /* Remove the body from the selector on CSS Reset*/
       height: 100%;
  }
  body {
      min-height: 100%;
  }
  

  Or using vh values:

  body {
      min-height: 100vh;
  }
  
  /* Remove from Custom CSS Reset*/
  html, body {
      /* height: 100%; */
  }
  

  More info here

  My sincerest apologies for the confusion.

  0

  

  lemonsprig•40

  @lemonsprigPosted over 1 year ago

  @MelvinAguilar no need to apologise its valuable advise and thanks for the clarification and solutions above it is really useful.

  One thing I hope you can answer for me though is why are the changes above needed. I opted to remove the custom css reset, however, my understanding is that css works on rule specificity or if of the same specificity, it works top down.

  The css reset on the body is at the top of the file, however min-height: 100vh was set on the css body rule at the bottom of the file. I would have expected this to have overridden the reset.

  0