Responsive QR code component using CSS Grid and media query

Community feedback

• 

  Tomazi•300

  @tomazi15Posted over 1 year ago

  Hi @Taiwo-art

  Sometimes i also find that some colours provided for the challenges do not really match the prototype.

  When that happens i usually find the solution for the challenge i am working on and use chrome colour picker extension to get the correct colours.

  Marked as helpful

  1
• 

  Liam Frosteman Neogard•170

  @FrostemanNeogardPosted over 1 year ago

  I think this looks quite good visually, but there's quite a bit of improvements that could be made.

  You seem to have a lot of divs where they aren't necessary. A simple way of structuring the card would be like this:

  main
      img
      div
          h1
          p
  

  It is quite important for semantic HTML that you put the most important content inside a <main> element. Centrering this could look something like this:

  // Card's parent, in this case the body element
  body {
      min-height: 100vh;
      display: flex;
      align-items: center; // Aligns vertically
      justify-content: center; // Aligns horizontally
  }
  

  The <main> element's initial display attribute is block, which means the child elements will take up an entire row and display vertically. Now you can simply style the rest of the content accordingly.

  As for the background color, I believe it can be found in the style-guide.md file, along with all the other colors and styling values used.

  Hope this helps!

  0