QR Code - Solution

Community feedback

• 

  Yash Joshi•450

  @yashgjoshi20Posted over 1 year 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%); } .

  Marked as helpful

  0
• 

  Bader Idris•2,880

  @Bader-IdrisPosted over 1 year 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

  Marked as helpful

  0
• 

  Yemi•40

  @layerdbagPosted over 1 year 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*/

  1
• 

  Yemi•40

  @layerdbagPosted over 1 year 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.

  0