QR Code Component

Community feedback

• 

  Adriano•38,120

  @AdrianoEscarabotePosted almost 2 years ago

  Hi ajjr, how are you? Welcome to the front-end mentor community! I really liked the result of your project, but I have some tips that I think you will enjoy:

  To align some content in the center of the screen, always prefer to use display: flex; it will make the layout more responsive!

  body {
      margin: 0;
      padding: 0;
      display: flex;
      align-items: center;
      flex-direction: column; // just if the body has two children
      justify-content: center;
      min-height: 100vh;
  }
  

  Every HTML document must contain an h1 element, to inform the main title of the page, to fix this we can do the following:

  <h1 style="font-weight: 700;">Improve your front-end skills by building projects</h1>

  The rest is great!

  I hope it helps... 👍

  Marked as helpful

  1

  ---

  

  ajjr•40

  @ajjrPosted almost 2 years ago

  @AdrianoEscarabote Thanks for your advice! I adjusted my solution accordingly and also added the h1 element. My bad for not thinking the boldened text as a headline.

  1
• 

  yishak abrham•2,150

  @yishak621Posted almost 2 years ago

  good design and also the answer to ur question is when u want to align items vertically and horizontally in center u should add these flex property for the parent container -example

  /*main container*/ 
   .center { 
     display: flex; 
     justify-content: center; 
     align-items: center; 
     height: 100vh; 
     background: var(--color-second); 
   }
  

  Remember that giving a height of 100vh or any height that u want to the parent container to cover or u can use grid and place items center

  Marked as helpful

  1

  ---

  

  ajjr•40

  @ajjrPosted almost 2 years ago

  @yishak621 Thanks. That was helpful! I now realise that the container vertical size is determined by the content instead the viewport. So by making the container larger than the content I am able to center it vertically, too. At least that's why I think it worked.

  1

  

  yishak abrham•2,150

  @yishak621Posted almost 2 years ago

  @ajjr sure until u add the height that the container should cover the DOM didn't put the content based on the viewport thats why i set height 100 percent of the viewport height ....so that the align-items property will set it the items inside container in the center of container ......by the way u should identify those confusing properties align-items(the items inside container vertically ) and align-content (the whole container vertically )....justify-items(the items inside container horizontally) and justify-content(the whole container horizontally)....once u understand these and how the flex properties work its easy to align items and contents in html

  1