Advice Generator - JavaScript Fetch API

Community feedback

• 

  somaye beiranvand•220

  @somaye-beiranvandPosted about 2 years ago

  Hi Rishma

  As I had your problem before I Know what exactly you meen by asking the question.

  In this project it's better to give this settings to body and just put your container inside it.

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

  it't better to give body min-height not a fixed height, so if necessary it can stretch vertically.

  great job on doing the project, happy coding😊

  Marked as helpful

  0

  ---

  

  Rimsha•240

  @rimshubPosted about 2 years ago

  @somaye-beiranvand Hello,

  Yes that's what i usually go with when there's just one element to be centered and I also did the same in this challenge. You're right, thank you for mentioning it, min-height (also the max-width) would be the best choice here.

  Thank youuu✨

  1
• 

  David•8,000

  @DavidMorgadePosted about 2 years ago

  Hello Rimsha, as always, great job getting the challenge done!

  I will try answering your questions:

  • The best way in my opinion is using flex in the parent element, this is by far in my opinion the easiest one, for example:

  html

  <div class='parentEl'>
      <div><p>I need to get centered!</p></div>
  </div>
  

  css

  .parentEl {
     display: flex;
     justify-content: center;
     align-items: center;
  }
  

  Another way around could be using grid:

  css

  .parentEl {
      display: grid;
      align-content: center;
      justify-items: center;
  }
  

  • The item will get centered anyway, if you setup a max-width it will center dinamically until it reach the max-width on resizing, same goes to min-width

  Hope my answers help you! if you have any questions, don't hesitate to ask, good solution!

  Marked as helpful

  0

  ---

  

  Rimsha•240

  @rimshubPosted about 2 years ago

  @DavidMorgade Yes i agree using flex is easiest one. Thank youuu for the feedback and answers!!

  1