CODEWITHSUNDEEP
htmlcssflexbox
codfish555
codfish555

Reputation: 96

Why isn't flex-direction column working here?

I'm trying to make my inputs stack ontop of each other for mobile view but flex-direction:column; doesn't seem to do the trick.

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

.sign-up-wrap{
    display:flex;
    justify-content: center;
    align-items: center;
}

@media (max-width: 655px){
  input[type=text], input[type=email], .btn {
    flex-direction: column;
  }
}
<div class="sign-up-wrap">
    <div class="sign-up">
      <input type="text" placeholder="What's your name?"/>
      <input type="email" placeholder="What's your email?"/>
    </div>
</div>

Upvotes: 0

Views: 5647

Answers (1)

Johannes
Johannes

Reputation: 67778

flex-direction: column; has to be applied to the flex container (i.e. .sign-up), not to the flex items themselves.

(I changed the media query to 800px min in the snippet to show the result immediately)

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

.sign-up-wrap{
    display:flex;
    justify-content: center;
    align-items: center;
}

@media (max-width: 800px){
  .sign-up {
    flex-direction: column;
  }
}
<div class="sign-up-wrap">
    <div class="sign-up">
      <input type="text" placeholder="What's your name?"/>
      <input type="email" placeholder="What's your email?"/>
    </div>
</div>

Upvotes: 2

Related Questions