Desktop QR code page using flex

Community feedback

• 

  Fer•3,970

  @fernandolapazPosted over 1 year ago

  Hi 👋, perhaps some of this may interest you:

  HTML / ACCESSIBILITY:

  • The main content of every page (the card in this case) should be wrapped with the <main> tag.

  • Instead of wrap each element with a <div>, better to use semantic elements like <h1> or <p>.

  • This is a meaningful image and in case the user can't see it, the alt text should give a description.

  CSS:

  • You might consider using some CSS reset as a good practice at the start of each project, to have a clean starting point and reduce differences between browsers. An example of a CSS reset from Josh Comeau 🔎

  For example, here are some very common and useful ones to get you started:

  * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  }
  

  • You should remove width: 1440px from the body to correctly center the card on the page (the body should always occupy the entire viewport). Also it is better to use min-height: 100vh; for the body, as using height causes the page to be cut off in viewports with small height (such as mobile landscape orientation).

  • Consider using relative units like rem or em since they are better for scalable layouts. Something simple to start with would be to convert to rem (1 rem equals the font size of the root element, 16px by default). Consider this suggestion especially for the font-size.

  I hope you find it useful, any questions do not hesitate 🙂

  Regards,

  0

  ---

  

  Karol Jaworski•50

  @KarolJaworskiPosted over 1 year ago

  @fernandolapaz Hey, thank you for taking a moment to review my code and give me some advices, I do appreciate it. I have just replaced the divs with semantic elements and switched the font-size to rem. As for the CSS reset, I'll start using it from now on :D

  Regards!

  1