Div remains same width when rotating ipad from portrait to landscape

Question

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?

I've changed the `position: fixed;` to relative and that sorted the problem but obviously now the navigation isn't fixed to the bottom of the page, so its not much of a solution but clearly thats where the problem lies.. Any ideas anyone? — David, Jan 13 '12 at 23:56
I dont really have the room to post it all in a comment, and it wont let me edit my first post because I'm new. The structure is basically
(all the images and links)
with nav being the CSS above and navContent being the following: `#navContent {width:550px; margin: 0 auto 0; }` — David, Jan 14 '12 at 18:15
You don't really need to include all the colors and gradients and font size for the code. Try reducing it to the minimum necessary that reproduces the problem. — Dan Dascalescu, Jul 11 '15 at 13:03
Duplicate of [What is the best method of re-rendering a web page on orientation change?](http://stackoverflow.com/questions/7919172/what-is-the-best-method-of-re-rendering-a-web-page-on-orientation-change) — Dan Dascalescu, Jul 11 '15 at 13:11

score 4 · Answer 1 · answered Jun 22 '12 at 04:29

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;}
}

score 0 · Answer 2 · answered Jan 17 '12 at 21:02

0

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>

answered Jan 17 '12 at 21:02

jonhurlock

1,798
1
18
28

Hi, the width of the nav div is currently set to 100%, the div within it is set to 550px; but I dont think that is what's causing the problem. When it goes from portrait to landscape it is maintaining the width of the screen in portrait which is larger than 550px (by about 200px from what I remember). – David Jan 18 '12 at 01:43
@Kai Right I think this is an overall problem with your style sheet. If you posted more code i.e. the html and css I could help you out more. I suggest you look at the following **[link](http://www.roccles.com/?p=140)**. It uses the jQuery mobile framework and will tell you how to detect orientation changes, and gives an example of changing content to suit the orientation changes. If you give the body a class of landscape or portrait ie body.landscape and body.portrain and the create styles for each it should fix your problem. – jonhurlock Jan 18 '12 at 02:34

score -2 · Answer 3 · edited May 23 '17 at 10:32

-2

What about this fix?

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

edited May 23 '17 at 10:32

Community

1
1

answered Sep 19 '13 at 21:36

DATEx2

3,585
1
24
26

That might work on the Galaxy S3 stock browser, but it doesn't work for the Safari iPad (just tested). See [my answer](http://stackoverflow.com/questions/7919172/what-is-the-best-method-of-re-rendering-a-web-page-on-orientation-change/31357325#31357325) for a working solution that forces reflow. – Dan Dascalescu Jul 11 '15 at 13:10

Div remains same width when rotating ipad from portrait to landscape

3 Answers3