Search code examples
htmlcssmobilewidthcentering

Center layout doesn't work on mobile/table devices

I have this simple page layout:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">        
        <meta name="viewport" content="width=device-width">
        <style>
            body {
                text-align: center;
                margin: 0;
                padding: 0;
            }
            .header {
                width: 100%;
                height: 50px;
                background: url('http://tinyurl.com/o8w87av') 50% 0 no-repeat;
            }
            .outer {
                width:960px;
                height: 300px;
                background: #dadada;
                margin: 0 auto;
            }
            .footer {
                width: 100%;
                height: 50px;
                background: #000;
            }
        </style>                        
    </head>
    <body>
        <div class="header"></div>
        <div class="outer"></div>
        <div class="footer"></div>
    </body>
</html>

On desktop it works fine but on mobile or tablet no. I think that there is some problem with width: 100%; but I can't figure it out how to resolve it.

Some interesting things I find out:

  1. I put this HTML+CSS code to jsfiddle (http://jsfiddle.net/STXmQ/) and there is same problem like on my mobile or table
  2. But when I turn jsfiddle to fullscreen mode (http://jsfiddle.net/STXmQ/embedded/result/) on desktop it's ok and also on my mobile and table it's OK!!

Online version of my layout

Thank you very much for helping me!

SOLVED: Thanks to Maximilian Hoffmann advice I was able to figure it out. I just add min-width: 960px to header and footer and now it's working correctly.

Solution

  • Thanks to Maximilian Hoffmann advice I was able to figure it out. I just add min-width: 960px to header and footer and now it's working correctly.