Css Flex

Community feedback

• 

  Pierre ||| per.net•180

  @finkenmann

  Posted over 2 years ago

  Your code has a few redundant elements. You can specify the centering directly in the body. flex and align-item: center is enough. Your .container doesn't need it anymore. The @media are completely unnecessary in this application. Just define your .qrcode with a width: min(90vw, 375px) and margin-inline: auto. This will center your element horizontally and your align-items in the body will be responsible for the vertical alignment. width:min(90vw, 375) means that depending on the viewport the smaller of the two values is used. On a narrow screen the width will be 90% of the viewport width, but with more space the element will grow to a maximum of 375px (or if you want to go bigger here, of course to a larger value). This way you need very little code and don't have to use unnecessary @mediaqueries.

  Of course you have to pay attention to the warnings of the accessibility report.

  Translated with www.DeepL.com/Translator (free version)

  01

  Marked as helpful