html, css, sass, and flexbox

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 🎨:

  • let me explain, How you can easily center the component.

  ---

  • 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;
  
      margin: 0;
  }
  

  • Now remove this style, after removing you can able to see the changes

  .card{
      margin: 2% 35%;     -  needs to be cleared
      height: 50%;            -   needs to be cleared
      width: 30em;         -   needs to be added
  }
  

  ---

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

  Happy coding!

  Marked as helpful

  1

  ---

  

  Alejandro Cañon•260

  @alecanonmPosted over 1 year ago

  @0xAbdulKhalid thank you so much dude!, im gonna read the resource that you gave me! 😃✨

  0
• 

  Hassia Issah•50,650

  @HassiaiPosted over 1 year ago

  To center .card on the page using flexbox or grid instead of margin, , add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body.

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

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

  For a responsive content, there is no need for a height in .card and .main, rather give .card a fixed max-width and a padding value for all the sides. .card{max-width:25em/400px; padding:1em/16px}.

  Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

  You forgot to add the hover effect to the design.

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  0