simpleProject with flexbox

Community feedback

• 

  Ian Rioba•450

  @Rioba-IanPosted 10 months ago

  Hey Skalex,

  There might be a better way to solve this part of your code

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

  First by giving the section a height of 90vh it means that at all screen sizes like it covers almost 90% of the screen's height. It will also bring a scroll bar automatically. To fix this you can put a min-height: 100vh to your body and remove the 90vh in the section.

  Second, since you've managed to center the items; which I'll also give you more options to center items as well; instead of giving the section a specific height, what would be better would to bring it to the center and just use padding of its inside content thus giving it a height.

  You might try using

  margin: 0 auto; // also margin-inline: auto;
  

  To bring the section to the center and then give it a

  margin-top: 20vh; // you can play around with this number to center it properly. 
  

  or

  transform: translateY(-50%)
  

  You can also try grid: you can check out this extensive detail.

  I hope this helps and bravo on finishing the project.

  Marked as helpful

  0

  ---

  

  Skalex Stuch•210

  @mussinoPosted 10 months ago

  Thanks so much, I will check on this asap!@Rioba-Ian

  0