All comments

• 

  Mohamed Abdirazak•10

  @mabdirSubmitted 9 months ago

  1. i can't card to stay in the middle
  2. if the card is supposed to stay center
  3. no

  

  bootstrap 5 card class

  1

  20
  

  aswinbhaskaran•60

  @aswinbhaskaranPosted 9 months ago

  @mabdir

  • I am unable to understand your third point: no.
  • For your second point, I would say yes, centering your card is a must since that is in your reference image when you download the assets. But considering the note that your solution should be as close to the reference as possible, it may really not necessary. I know I am contradicting myself, sorry about that, but my point is: If my understanding is correct, it is basically your preference.
  • Your first point: If there are appropriate width and height, you could try display:flex;justify-content:center;align-items:center.

  0
• 

  Mei Lee•40

  @meilleeSubmitted 9 months ago

  Is there an alternative approach, other than utilising position: fixed;, to maintain the footer at the bottom of the page while simultaneously ensuring that the QR component remains vertically centered within the viewport?

  

  Responsive QR Code Component Using Flexbox

  3

  50
  

  aswinbhaskaran•60

  @aswinbhaskaranPosted 9 months ago

  @meillee According to me, there is another way to implement it, but I am open to better options from others too.

  You can use about two display:flexs. The outer one can probably have justify-content:space-between;flex-direction:column while the inner one can probably have align-items:center. If there is enough space and it is also your preference, you can also add align-content:center, but you would need to add flex-wrap:wrap for it to work.

  This might make it look like the footer is at the bottom of the screen, while the QR code part is at the center of the screen. But the problem is width and height. While the width might not be as much a big problem, the height would be, considering different devices have different screen height.

  0