QR Code - HTML and Vanilla CSS

Community feedback

• 

  P

  Fluffy Kas•7,715

  @FluffyKasPosted over 2 years ago

  Heyo,

  Having some solid foundations before moving on to javascript is a great idea, it will save you from a lot of headache later. ^_^ Now some advice:

  1. It's best to center your component using grid/flexbox. Setting fixed margins won't work on every screen width, unfortunately. So you could add this to the body, for example:

  display: grid;
  place-items: center;
  min-height: 100vh;
  

  2. Remove the height from your component, there's no need for it, in fact it is causing a bit of an overflow at the moment! Most elements have some default height that can be increased by adding padding, if needed.

  3. "qr-maintext" should be a heading and "qr-subtext" a paragraph, not the other way around ^_^

  4. Remove the <br> from your solution, that's used for other things. You could set a max-width on your element or add some padding left and right if you'd like the text to break at a certain point.

  I hope this helps a bit!

  Marked as helpful

  1

  ---

  

  EK•100

  @EuphoriaCXIPosted over 2 years ago

  @FluffyKas Hey!

  Thanks so much for your feedback, I appreciate it.

  I updated a second project I just completed using your grid example which worked out great. When using margins, would it still be okay to use margin: 0 auto; when I want a certain max-width to be respected on the page?

  I'll make improvements on my semantic HTML.

  Thanks again!

  1

  

  P

  Fluffy Kas•7,715

  @FluffyKasPosted over 2 years ago

  @alwaysBeThankful Sure! Using margin: 0 auto and max-width is a good idea for centering most things. Centering elements with grid/flexbox like this will only work in specific use cases (meaning, you'll rarely have a single component dead centered in an empty page like in this challenge).

  0