Responsive QR code using only CSS flexbox

Community feedback

• 

  Priyesh Singh Waldia•150

  @Priyesh-Singh-WaldiaPosted over 1 year ago

  To fix the QR code issue

  you can remove the height property from your box class, its restricting the height of your box to 55vh cause 1vh is relative to 1% of the height of the viewport

  try it out, that should fix the problem.

  Marked as helpful

  0

  ---

  

  aumvashisht•10

  @aumvashishtPosted over 1 year ago

  @Priyesh-Singh-Waldia Thanks! It worked but I have a doubt when we use align-items: center; we also need to specify the height by compulsion right if I don't specify the height then how will it align it to the center?

  0

  

  Priyesh Singh Waldia•150

  @Priyesh-Singh-WaldiaPosted over 1 year ago

  @aumvashisht You are welcome!

  The align items: center, is used to align the items along the cross-axis inside of an HTML Element you have set as display: flex

  ( in your case element div with the class .bigger-box is the container ) and you have already set the height as 100vh for the same.

  if you remove the height value, then all the elements will stick to the top of the page cause a div without any specified width and height or even any characters is of 0px in size, you can try this out by deleting everything inside your div with the class .box

  as for your .box class with flex-direction: column, there is only the width property set at 250px, that's the reason why all the text inside is getting wrapped inside the div.

  if you remove the width property, then the entire paragraph will render in one line ( taking up the as much space needed by the characters to fit inside the item set as display: flex)

  as for your previous qr code issue if you change the unit of height from vh to px then it will remain at a fixed height cause the unit vh adjust according to the display height (1vh is relative to 1% of the height of the viewport)

  For Ex:

  if the total height of your display is 1000px then 1vh would mean 10px.

  if the total height of your display is 500px then 1vh would mean 5px.

  Hope, this helps you out with your CSS learning journey 😊

  Marked as helpful

  0