First project! QR-CARD ❤️

Community feedback

• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  ---

  CSS 🎨:

  • Looks like the component has not been centered properly. So let me explain, How you can easily center the component without using margin or padding.

  ---

  • We don't need to use margin and padding to center the component both horizontally & vertically. Because using margin or padding will not dynamical centers our component at all states

  ---

  • To properly center the component in the page, you should use Flexbox or Grid layout. You can read more about centering in CSS here 📚.

  ---

  • For this demonstration we use css Grid to center the component

  body {
      min-height: 100vh;
      display: grid;
      place-items: center;
  }
  

  • Now remove these styles, after removing you can able to see the changes

  body {
    margin: 9.5rem auto;
  }
  .card-wrapper {
    margin: auto;
  }
  

  ---

  ---

  • Now your component has been properly centered

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  0
• 

  Adrian Anin•160

  @adriananinPosted over 1 year ago

  For the HTML semantics you can use this to check : https://validator.w3.org/

  0
• 

  Bernardus•1,095

  @BernardusPHPosted over 1 year ago

  Hello MATTFORRESTER39.

  For design responsive I see that your <div id="qr-code-container"> is set to 18 rem so that is breaking your card when you resize because the card might get smaller but not the image itself because it is set at 100% width. But since it reached the min of 375 px screen size and is fine then nothing is wrong but I would rather put the <div id="qr-code-container"> at 100% width width a bit of padding on the parent.

  Don't use height:100vh on the body rather use min-height:100vh and min-height:100dvh the min-height makes your body's height as big as the screen but it can then increase based on the content. The dvh is for more responsiveness but put the vh before this as some browsers cant read dvh.

  body{
  min-height:100vh;
  min-height:100dvh;
  }
  

  The dark theme was a nice touch I like it.

  Yes github was quite difficult starting out. I would recommend just manually putting the files in the github repo and then launching it from pages. If you get used to it then I would highly recommend learning Git as it can make editing and storing your projects on github much easier.

  Hope this helped.

  0