QR Code Component Solution using Bootstrap Cards

Community feedback

• 

  Fer•3,970

  @fernandolapazPosted over 1 year ago

  Hi 👋, perhaps some of this may interest you:

  • It is convenient to separate the code in different files (HTML, CSS) for a better organization and easier maintenance.

  HTML / ACCESSIBILITY:

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

  • Every page should have an <h1> to improve user experience and because it is an important element when it comes to SEO. It is good not to skip heading levels.

  • In general, styles shouldn't be added inline (as you did with the card width), better to write all CSS rules together in an external file.

  CSS:

  • The page content could be centered using Grid or Flexbox. For example as follows:

  body {
  min-height: 100vh;
  display: grid;
  place-content: center;
  }
  

  And removing the margins.

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

  Regards,

  0
• 

  Alexandra Tarasova•220

  @tasandraPosted over 1 year ago

  Nice work 😁! I like the coloring! Try to remove width from your HTML, it should center the card in a small screen

  <div class="card" style="width: 20rem;">

  0