Why is the header section so far up than it should be when I justify-content?

user_18113851 0
Viewed 29

Why is the header section so far up than it should be when I justify-content?

When I set justify content of the header__container to space around, the header starts to go way up beyond its margin. Please help.

header {
  height: calc(100vh - 80px);
}

.header__container {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
<header>
  <div class="header__container">
    <div class="header__description">
      <h1>Lebanon's most awarded online library platform</h1>
      <h2>Find your dream book with <span class="purple">Library</span></h2>
    </div>
    <figure class="header__img--wrapper">
      <img src="https://via.placeholder.com/200" alt="">
    </figure>
  </div>
</header>

flexbox css html
3 Answers

You've set the container height to 100%, but sometimes that's not enough height for your content. Because you've centered it some of the top is cut off, and same at the bottom.

Instead, set min-height.

header {
  height: calc(100vh - 80px);
}

.header__container {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
<header>
  <div class="header__container">
    <div class="header__description">
      <h1>Lebanon's most awarded online library platform</h1>
      <h2>Find your dream book with <span class="purple">Library</span></h2>
    </div>
    <figure class="header__img--wrapper">
      <img src="https://via.placeholder.com/200" alt="">
    </figure>
  </div>
</header>

user_12648040

Now i can see, when you use flex-direction: column; then your justify-content do vertical aligment.

You don't need to use flex-direction: column in this case, because it's usual behavior for display: block elements

user_114967320

Try removing the justify-content: space-around; which on a small screen does what you say given you forced a height on the header (why?) yet have "bigger" items within it (your image). Keep in mind that "too much CSS" is often the bane of it - less is more most often.

Note I put a border on so we can visually see the blocks.

header {
  height: calc(100vh - 80px);
}

.header__container {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  /*justify-content: space-around;*/
}

.header__container>* {
  border: solid lime 1px;
}
<header>
  <div class="header__container">
    <div class="header__description">
      <h1>Lebanon's most awarded online library platform</h1>
      <h2>Find your dream book with <span class="purple">Library</span></h2>
    </div>
    <figure class="header__img--wrapper">
      <img src="https://via.placeholder.com/200" alt="">
    </figure>
  </div>
</header>

Alternate option: stop doing the height and let the "flow" flow.

header {
  /*height: calc(100vh - 80px);*/
}

.header__container {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.header__container>* {
  border: solid lime 1px;
}
<header>
  <div class="header__container">
    <div class="header__description">
      <h1>Lebanon's most awarded online library platform</h1>
      <h2>Find your dream book with <span class="purple">Library</span></h2>
    </div>
    <figure class="header__img--wrapper">
      <img src="https://via.placeholder.com/200" alt="">
    </figure>
  </div>
</header>

user_1259810
Related