QR Code - Solution

Community feedback

• 

  Yash Joshi•450

  @yashgjoshi20

  Posted about 2 years ago

  1. You can set the container in the middle of the screen then whatever changes user makes can be added in properties of the styles.css later on to perfect it.
  2. You can add the .container { display: absolute; top:50%; left: 50%; transform: translate(-50%, -50%); } .

  00

  Marked as helpful
• 

  Bader Idris•2,880

  @Bader-Idris

  Posted about 2 years ago

  You can set the container in the middle of the screen whatever user changes it when you add these properties to it in CSS: .container { display: absolute; top:50%; left: 50%; transform: translate(-50%, -50%); } the new feature is transform, it has many lovely properties you can discover, I personally love it

  00

  Marked as helpful
• 

  Yemi•40

  @layerdbag

  Posted about 2 years ago

  You actually do not need bootstrap for this challenge as it is a single component that can be done using CSS. You could center your component by using:

  html, body { 
   min-width: 100%;
   min-height: 100%;
   display: flex; 
   justify-content: center; 
   flex-direction column;
  }
  

  You could also add a box-shadow on the card component to make it look like the design.

  .card { box-shadow: 0px 5px 7px var(--color); } /* where --color is your chosen color*/

  10
• 

  Yemi•40

  @layerdbag

  Posted about 2 years ago

  Your solution does not include semantic HTML. For example, you could wrap your component in an article element which will be placed in a main element to make it more semantically acceptable.

  00