Search code examples
htmlcssflexboxresponsive-design

1-column flex layout not responsive, when we reduce the device width

The following flex layout works, but when we reduce the device width (ex: Chrome Developer Tools, Touch device simulation), it doesn't reduce its width, and doesn't keep the column centered with white margins around on both sides.

Why?

Sadly it can't be easily seen in the snippet below.

enter image description here

html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
}

.container {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 80%;
  height: 100%;
  background-color: #ccc;
  margin: auto;
}

img {
  max-height: 100%;
  max-width: 100%;
}

.top {
  width: 50%;
  background-color: #ddd;
}

.middle {
  background-color: #aaa;
}

.bottom {
  flex-grow: 1;
  background-color: white;
}

.footer {
  background-color: #eee;
}
<div class="container">
  <div class="top">
    <img src="https://placehold.co/3000x2000">
  </div>
  <div class="middle">
    middle
  </div>
  <div class="bottom">
    bottom (should fill space with white, so that footer is always sticky on bottom)
  </div>
  <div class="footer">
    footer
  </div>
</div>

Note: it's already the case around 230px width. Why?

enter image description here

Solution

  • You are missing a viewport tag:

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    Adding something like the above instructs your browser to show this page in mobile viewports as well, instead of assuming it's only for desktop.