QR Code challenge

Community feedback

• 

  Yonten•340

  @yozidstPosted 11 months ago

  Hello,

  Congrats and Great job on your 1st Challenge! 👍

  I would recommend the following for laying out your content for the future. This way you won't have to center the container using margins or padding and the full height of the screen is utilized.

  eg.

  body {
      margin: 0;
      padding: 0;
      min-width: 100vw;
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  

  Also, after setting your body's font size, you can make use of rem to scale the other differing components.

  • This means that 1rem equals the font size of the html element, which for most browsers has a default value of 16px.

  1

  ---

  

  P

  Øystein Håberg•10,710

  @Islandstone89Posted 11 months ago

  @yozidst there is no need to set the min-width, as the body is 100% wide by default. Otherwise, good tips :)

  1
• 

  P

  Øystein Håberg•10,710

  @Islandstone89Posted 11 months ago

  HTML:

  • You need a <main>, this is important for accessibility. In such a simple component, it can also be the card, so change .container into a <main>.

  • The alt text also needs to say where it leads (frontendmentor.io).

  • .attribution should be a <footer>.

  • Footer text needs to be wrapped in a <p>.

  CSS:

  • It's good practice to include a CSS Reset at the top.

  • Font-size must never be in px. Use rem instead.

  • Remove the fixed width and height. You rarely want to set fixed dimensions, as this easily creates issues with responsiveness.

  • Give the card a max-width of around 20rem, so it doesn't stretch too wide on bigger screens.

  • On the image, add display: block and replace width with max-width.

  • Instead of using marginon the card itself, a more common way to center something in the middle is to use Flexbox on the parent of what you want to center. In this example, the parent of the card is the body:

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  

  0