CODEWITHSUNDEEP
htmlcss
Kevin.a
Kevin.a

Reputation: 4306

Center children divs on certain screen width

I am trying to make my app responsive. The original css looks like this :

.footer-container {
  width: 100%;
  min-height: 260px;
  height: auto;
  background: black;
  color: white;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  position: absolute;
}

The output is this :

enter image description here

But when the screen width reaches 1020px i want them to be underneath eachother.

I tried making the display:flex display:block :

@media only screen and (max-width: 1020px) {
  .footer-container {
    width: 100%;
    min-height: 260px;
    height: auto;
    background: black;
    color: white;
    display: block;
    text-align: center;
    justify-content: center;
    position: absolute;
  }
}

But that turns out like :

enter image description here

I also tried flex-direction: row but that didn't work either, it practically didnt change a single thing.

Upvotes: 0

Views: 21

Answers (1)

Gerard
Gerard

Reputation: 15796

Using basic HTML below a solution using a media query. Mobile first and when the screen size exceeds 1024 pixels the media query kicks in.

.footer-container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.contact,
.subscribe,
.follow {
  width: 100%;
  display: flex;
  justify-content: center;
}

@media (min-width: 1024px) {
  .footer-container {
    flex-wrap: no-wrap;
    justify-content: center;
  }
  .contact,
  .subscribe,
  .follow {
    width: auto;
  }
}
<div class="footer-container">
  <div class="contact">Contact us</div>
  <div class="subscribe">Subscribe</div>
  <div class="follow">Follow us</div>
</div>

Upvotes: 1

Related Questions