Responsive QR-Scan card using Bootstrap

Hey ! great work out there i notice that you are using margin , absolute , and transform in order to center the qr card component , i suggest that you use display : flex and display : grid less code and also complexity when using. that's all and happy coding !!!

you can explore more info about display property and see its magic

body {
  background-color: hsl(212 45% 89%);
  min-height: 100vh; // add this
  display: grid; // add this
  place-items: center; // add this 
}

.card {
  border-radius: 15px;
  text-align: center;
  margin: auto; // remove this
  width: 300px;
  height: 450px;
  background-color: hsl(0, 0%, 100%);
  position: absolute; // remove this
  top: 50%; // remove this
  left: 50%; // remove this
  transform: translate(-50%, -50%); // remove this
}