QR-Code component UI

Community feedback

• 

  Divine Chukwunwemmeri Okafor-udah [~Dee]•60

  @DeeokaforPosted over 1 year ago

  Hello Temitope, I just checked out your project, nice try, keep pushing. I would want to point out a few things.

  1. To centre the card, you must first ensure that the parent div takes up the full height and width of your viewport like say 100vw and 100vh. Then, applying Flexbox, aligning and justify items/content might produce the desired effect.

  2. Try to stick to the fonts provided for you in the style-guide.md. They can be mostly found on google fonts.

  3. Play with opacity to find the best fit for each design you find it in.

  Marked as helpful

  1

  ---

  

  Temitope Akinsunmade•10

  @Temitope15Posted over 1 year ago

  @Deeokafor thank you so much for these reviews, I will refactor my code and keep you posted. Thank you so much for your time

  1

  

  Temitope Akinsunmade•10

  @Temitope15Posted over 1 year ago

  I have updated my code base now, check it out:

  • code base on github
  • live code

  I had to use the overflow : hidden property in my css because the 100vh and 100vw I applied made the page to flicker. I tried removing the padding and margin in the formatter '*{what i want to format}" but it was still flickering. so the overflow:hidden helped me remove it. Is there a way I can make it not to flicker without using the overflow : hidden property?

  0

  

  Divine Chukwunwemmeri Okafor-udah [~Dee]•60

  @DeeokaforPosted over 1 year ago

  @Temitope15 how do you mean flicker??

  1

  

  Temitope Akinsunmade•10

  @Temitope15Posted over 1 year ago

  @Deeokafor when the overflow-x is showing. Which means the width is more than 100%, so the webpage will have to expand, which will cause users to scroll left and right to see contents in the webpage.

  0
• 

  Kingsley Aggrey Fynn•160

  @Kingsley-AggreyPosted over 1 year ago

  Giving the Container the display of flex ,justify to center and align to center should be able to center it children, if you are still getting problems makes sure the Container fill the entire screen by setting it width to 100vw and height to 100%. I hope this helps

  Marked as helpful

  1