All comments

• 

  Brandon Matran• 10

  @Brandon-Matran

  Submitted over 1 year ago

  Had trouble trying to figure out how to center the qr component into the middle of the browser. Wanted to see people's solutions.

  

  Newb solution

  4

  30

  

  Valentin D.• 160

  @Valentin-Dr

  Posted over 1 year ago

  Hello !

  In order to center an element, one of the possible ways is to use flexbox. But, in order to do that, you'd have to set the width and height attributes of the element's parent, which is the body.

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

  Using flex on the body, along with justify-content: center and align-items: center will center its child(s) both horizontally and vertically. The reason we have to set the height and the width is because this will center child(s) depending of the available space it has.

  Once done, your card will be centered on your page.

  Now, for simplicity sake, you can use

  .container {
      padding: 30px;
      background-color: white;
      border-radius: 20px;
      width: 20%;
  }
  

  I've put width at 20% instead of vw, since our body now already takes 100vw, but you could put a fixed width with rem unit instead like width: 20rem; which looks better in my opinion but depends on what you need to do with the project.

  After that, I modified this part of your CSS :

  .qr-code {
    // border: 30px solid white;
    // background-color: white;
    // border-radius: 30px;
    // margin: auto;
    width: 100%;
    text-align: center;
  }
  

  Since I've added a padding on the .container, along with a background-color and border-radius, you don't need to add them in here anymore. The width: 100% makes it take all the available width, minus the padding of the parent.

  And I've also done the same with the image:

  .image {
    width: 100%;
    border-radius: 30px;
  }
  

  Also a couple last things, images MUST have an alt attribute, which allows to display text in case of broken image, or if read by a screen reader. If the image is not important for your page content, leave it empty, but in that case you could add something like alt="Frontend Mentor QR code"

  Replace the h2, with an h1, since it is the main "title" of the page

  Overall, it's a great start ! You understood the project well, I hope you had fun making it, it's the most important !

  Have fun coding

  0