Search code examples
htmlcssmobileflexboxfooter

Why doesn't this flexbox footer work on a mobile device?

I'm practicing using flexbox to build footers. The footer I'm building at the moment works as expected on a desktop but not on a mobile device.

Here it is: http://codepen.io/FullMetalAlchemist3/pen/bwzEYL/

When I resize the footer on a desktop this media query works and the transition from a column layout to a row is fluid:

@media (min-width: 850px) {
.footer {
display: flex;
padding: 10px;
flex-flow: row;
}

However, if inspected on a mobile device the footer content remains in a row. I don't understand why it does this. On a mobile device the footer should be in a column because a screen under 850px will run the original flex-flow, which is set to a column layout:

.footer {
display: flex;
padding: 10px;
flex-flow: column;
justify-content: center;
}

I think the problem has something to do with the footer not shrinking correctly. The width of the footer on a mobile is 980px, so I can see why it is still in a row but why on earth is it so wide? Why doesn't it shrink in the same manner as when being resized in a desktop window?

Any help would be greatly appreciated!

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

    I think you are missing this meta tag in your header. Just because a mobile phone is small doesnt mean it has less pixel than a monitor actualy some even have more.