QR code challenge

Community feedback

• 

  Ecem Gokdogan•9,380

  @ecemgoPosted over 1 year ago

  Some recommendations regarding your code that could be of interest to you.

  • If you want to make the card centered both horizontally and vertically, you'd better add flexbox and min-height: 100vh to the body

  body{
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     min-height: 100vh;
  }
  

  • When you use flexbox in the body, you don't need to use flexbox and margin-top in the main to center the card
  • If you use max-width, the card will be responsive

  main {
    /* width: 18%; */
    max-width: 300px;
    /* margin-top: 100px; */
  }
  

  • In addition to that above, in order to make the card responsive and the image positioned completely on the card, you'd better add width: 100% to the img

  img {
    width: 100%;
    /* height: 250px; */
    /* width: 250px; */
    border-radius: 10px;
  }
  

  • Finally, if you follow the steps above, the solution will be responsive.

  Hope I am helpful. :)

  Marked as helpful

  1

  ---

  

  Vishakha Roy•100

  @VishRoyPosted over 1 year ago

  @ecemgo Thank you for your suggestions. It is really helpful.

  1
• 

  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

  main {
    margin: auto;
    margin-top: 100px;
  }
  

  ---

  ---

  • Now your component has been properly centered

  ---

  .

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

  Happy coding!

  Marked as helpful

  1

  ---

  

  Vishakha Roy•100

  @VishRoyPosted over 1 year ago

  @0xAbdulKhalid Thank you for your suggestions. It is really helpful.

  0
• 

  IryDev•1,580

  @IryDevPosted over 1 year ago

  Hey, well done for completed this challenge 😁

  I have some suggestions to help you to improve your solution :

  • if you want to correctly center your card :
  • Give the body a min-height of 100vh
  • Add the properties, display: flex; justify-content: center; align-items: center; to make the card center on the vertical axis and horizontal axis
  • In order to import a font from google font you can use this line at the top of your css file : @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap');
  • Then use the property font-family: 'Outfit', sans-serif;
  • Your page should have a <h1> tag
  • Replace the <h2> tag by the <h1>

  CSS :

  @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap');
  
  body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Outfit', sans-serif;
  }
  

  I hope you'll find this helpful, and your solution is really good 😄

  Marked as helpful

  1

  ---

  

  Vishakha Roy•100

  @VishRoyPosted over 1 year ago

  @IryCode Thank you for your suggestions. It is really helpful.

  I have updated my solution based on your suggestions. Please take a look.

  0

  

  IryDev•1,580

  @IryDevPosted over 1 year ago

  @VishRoy GG your solution is better now, your card is correctly centered, and the font is good 👍

  Marked as helpful

  1

  

  Vishakha Roy•100

  @VishRoyPosted over 1 year ago

  @IryCode Thank you !

  0