QR Component using basic CSS

Community feedback

• 

  KapteynUniverse•2,170

  @KapteynUniversePosted 23 days ago

  Hey Mark, nice job.

  .container p {...} means p tag inside the container, doesn't matter how nested the p is. For example .container p {...} will style this:

  <div class="container"><div><div>
  <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
  </div></div></div>
  

  but .container > p {...} will not. .container > p {...} only works for this:

  <div class="container">
  <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
  </div>
  

  p has to direct children of the .container

  I prefer to use neither of them. But i will choose .container > p {...} if i have to because .container p {...} might cause some styling issues on bigger projects if not used carefully.

  You can also make it longer like .container > div > div > p {...}

  Also i would move the flex to the body (for footer and header)

  body {
      background-color: #D5E1EF;
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
  }
  

  For centering you can also use grid, it is just 1 less line of code. Flex or grid, whatever you prefer

  Marked as helpful

  0