CODEWITHSUNDEEP
cssipad
David
David

Reputation: 437

Div remains same width when rotating ipad from portrait to landscape

I'm currently developing my first web app and have come up against a problem. When the app is opened the navigation div along the bottom (pictured below) renders fine, same when I rotate the iPad to portrait. But when I rotate from portrait to landscape it seems to maintain the same width, at least until I touch the screen. It’s not a massive problem as it returns to its normal state when I start scrolling but it’s a bit untidy looking. I've attached a few images:

Portrait:
enter image description here

After rotating from Portrait to Landscape: enter image description here

This is the CSS I'm using for that div:

nav {background-image: linear-gradient(bottom, rgb(0,0,0) 15%, rgb(51,51,51) 69%);
    background-image: -o-linear-gradient(bottom, rgb(0,0,0) 15%, rgb(51,51,51) 69%);
    background-image: -moz-linear-gradient(bottom, rgb(0,0,0) 15%, rgb(51,51,51) 69%);
    background-image: -webkit-linear-gradient(bottom, rgb(0,0,0) 15%, rgb(51,51,51) 69%);
    background-image: -ms-linear-gradient(bottom, rgb(0,0,0) 15%, rgb(51,51,51) 69%);
    background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.15, rgb(0,0,0)),
    color-stop(0.69, rgb(51,51,51)));
    border-top: 1px solid #000;

    text-align: center;
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 51px;
    color:#CCC;
    font-size:11.3px;
    font-weight:bold;
    overflow: hidden;
    margin: 0 auto 0;}

Is there a way of getting round this and having the div automatically fill the width of the screen without the user touching it?

Upvotes: 4

Views: 5251

Answers (3)

DATEx2
DATEx2

Reputation: 3510

What about this fix?

@media screen and (orientation: landscape){
  .fix-orientation { background:red; } /* This will cause a style recalculation */
}

Upvotes: -2

Robot Woods
Robot Woods

Reputation: 5687

I have encountered this problem twice. The first time, I had to change my viewport meta tag from 

<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale = 1.0">

to

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

which worked, but the next time it would not, despite being essentially identical structure ...this time, I had to use media queries, so in the CSS, I set the footer to be position:fixed;bottom:0;width:100% but followed it with:

@media screen and (max-device-width: 480px) and (orientation:landscape) {
    #navbar{width:480px;}
    #foot{width:480px;}
}
@media screen and (min-device-width: 481px) and (orientation:landscape) {
    #navbar{width:1024px;}
    #foot{width:1024px;}
}

Upvotes: 5

jonhurlock
jonhurlock

Reputation: 1908

I think it may be to do with your width property rather than setting it to a fixed pixel, why not set it to 100%?

I have tested it on the emulator, but not an actual device. It seems to work fine on the iOS simulator.

Heres an example of what I mean:

<html>
    <head>
        <style>
            #nav{
                position:fixed;
                bottom:0px;
                left:0px;
                height:40px;
                width:100%;
                background:blue;
                text-align:center;
            }
        </style>
    </head>
    <body>
        <div id="nav">
            <p>My Navigation bar</p>
        </div>
    </body>
</html>

Upvotes: 0

Related Questions