QR code component solution using CSS Flexbox

Community feedback

• 

  Kehinde Hussein, Fasunle•190

  @FasunlePosted over 2 years ago

  HTML Landmarking

  div tag with class container should be the direct element of body tag i.e <div class="container"></div>

  use landmarking tags such as nav, header, main, footer to help with accessibility.

  don't use section tag directly inside body tag

  styles

  I suggest you don't give the container a fixed height of 100vh

  Just use display:flex; and center it by specifying justify-content: center; and align-items:center; on the container.

  You can add padding to the container. This will prevent your bar from using full 100% width on mobile.

  on you card component, you could set max-width: max-content; to prevent getting too big on larger screen.

  You could check my version of this and leave a comment.

  I hope you find this useful 😊

  0

  ---

  

  Assem•20

  @assem-frontdevPosted over 2 years ago

  @Fasunle Thanks for your feedback.

  0

  

  Kehinde Hussein, Fasunle•190

  @FasunlePosted over 2 years ago

  @assem-frontdev you are welcome.

  0
• 

  Dan Kant•310

  @Dan-KantPosted over 2 years ago

  Good day Assem. I also had the problem centering the box. However, I solved it by setting both html and body's widths and heights to 100% and then by applying flexbox properties I positioned it to the center of the viewport. Give it a try. I'll be delighted if I could be of use.

  0

  ---

  

  Assem•20

  @assem-frontdevPosted over 2 years ago

  @Dan-Kant Thanks for your feedback.

  0