QR Card

Community feedback

• 

  Michael Johnson•970

  @mikej321Posted almost 2 years ago

  Hello there,

  Great work on your project! Something that could really help it is centering the content perfectly on the page. Here is the code for that.

  body { background-color: hsl (212, 45%, 89%); display: flex; flex-direction: column; height: 100vh; justify-content: center; align-items: center }

  Also, remove the margin from your .card container as it will mess up the positioning. Now notice that I made the body a flexbox and gave it a height of 100vh;. This will turn your entire body into a flexbox while the flex-direction will make the attribution appear underneath your container. Next, the content is justified and aligned to the center. From there, you may add a margin back to your container to move the attribution further down if you want.

  Finally, I would change the width of your .card container to a max-width to make it more responsive, remove the height, and simply use margins and padding to achieve the desired look. If done correctly, you will match the designs without ever having to set a height. From my understanding, height is only meant to be set if absolutely necessary.

  I hope this helps and happy coding!

  Michael Johnson

  Marked as helpful

  0

  ---

  

  Abdulrhman Mohamed Soliman•390

  @AbdulrhmanSolimanPosted almost 2 years ago

  Thank you @mikej321 for your great tips and for this feedback. I will make these changes right now

  0

  

  Michael Johnson•970

  @mikej321Posted almost 2 years ago

  @AbdulrhmanSoliman No problem! If you need any further help, feel free to reach out!

  0