Responsive div is taller than 100% when I flip my smartphone to landscape. How to fix it?

Question

Here is my HTML code for the divs (parent/child):

<div id="header">
    <div id="elements">
        <img style="margin: auto" class="img-responsive" src="https://s20.postimg.org/59ntjyiot/Arvan_Tourism_Logo_Web.png" alt="ArvanTourismLogo.png">
        <p style="font-size: 2.5em; color: white">Arvan Tourism</p>
        <p style="font-size: 1.5em; color: white">Explore our wonderful Albania.</p>
        <button id="WhatWeOfferButton" class="btn btn-success" style="margin-top: 5px"> What do we offer? </button>
    </div>
</div>

Here is my CSS code:

#header {
    box-sizing: border-box;
    background-image: url("https://s20.postimg.org/o8ddqmo7x/Blue_Eye.jpg");
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
    display: table;
}

#elements {
    display: table-cell; 
    text-align: center;
    vertical-align: middle;
}

Here are screenshots of how it looks on mobile.

Portrait screenshot

Landscape screenshot

What tweaks should I perform so that I can prevent it from being taller on landscape mode? I am using Bootstrap framework.

Does this also occur, when the page is reloaded in each format? @athanasios-canko Websites are only rendered once and if the orientation changes, e.g. iOS only turns the rendered website, without re-rendering the page. See this question for a possible solution: http://stackoverflow.com/questions/7919172/what-is-the-best-method-of-re-rendering-a-web-page-on-orientation-change — feeela, Aug 08 '16 at 14:26

score 0 · Answer 1 · edited May 23 '17 at 12:08

You need to detect the change in orientation , and reset your div height to 100% of the new viewport. Here's how you can do it:

Simple Fix:

// Listen for orientation changes
window.addEventListener("orientationchange", function() {
    $('.your_div').height('100%');
}, false);

Some browsers may not support that event, so a safer way is to first check if the event is supported, and if not use a 'resize' event. You can achieve this as described in this answer:

Safer Fix:

// Detect whether device supports orientationchange event, otherwise fall back to
// the resize event.
var supportsOrientationChange = "onorientationchange" in window,
    orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";

window.addEventListener(orientationEvent, function() {
   $('.your_div').height('100%');
}, false);

Responsive div is taller than 100% when I flip my smartphone to landscape. How to fix it?

1 Answers1