All solutions

• 
  Submitted 4 months ago

  QR code component using CSS flexbox and incorporating accessibility

  • HTML
  • CSS

  1

  30

  ---

  I'm currently looking for feedback regarding my use of flexbox for this project (1) and how I approached making this site more accessible (2).

  1)To get the card holding the QR code to be positioned in the center I decided to use flexbox. While this does keep the card in the center of the page, changing the dimensions of the screen smaller that of the card causes issues to occur.

  If the dimensions of the screen become to small horizontally, the card is cut off and the text inside the div of class 'attribution' (which is currently under the card and hidden using the 'hidden' class) no longer aligns the text to the center. I believe this is due to the size of the flex box column also changing smaller that the screen size.

  If the dimensions of the screen become to small vertically, and the user uses 'tab' to navigate to different items, the screen scrolls to the bottom of the page, (viewing the items in the div of class 'attribution') and the invisible link button is no longer aligned with the QR code.

  Is there a way to prevent the above issues from occurring while also using flexbox?

  2)I've gone into more detail about how I handled accessibility in the 'What challenges did you encounter' section. I'm mostly looking for feedback on if the approach I used and how it can be improved upon.