media queries ignored in landscape

Peter64 · September 10, 2016

I am trying to help an friend with a new website and it seem that at the work section, media queries are ignored in landscape, portrait is working fine. The problem is that I realy don't know what I am doing wrong, maybe someone could tell me where I have done something wrong. When looking on mobile device the work images (buttons) should be organized one under each other. In portrait this works fine, but in landscape it ignores the media queries and the work images (buttons) are displayed as on desktop next to each other en up on each other. Why are media queries working in portrait but are ignored in landscape. One of the media queries is:

@media only screen and (min-width: 230px) and (max-width: 650px) {
    .work {
      height: 1670px;
    }
    .work_container {
      right: 0%;
      width: 100%;
      }
    .work_layer {
      opacity: 1;
      background-color: rgba(0, 0, 0, 0.3);
    }
    .beauty {
      top: 25px;
      left: 50%;
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
      }
    .beauty:hover {
      top: 25px;
      left: 50%;
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
      right: auto;
      }
    .hair {
      top: 525px;
      left: 50%;
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
      }
     .hair:hover {
      top: 525px;
      left: 50%;
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
      right: auto;
      }
    .advertising {
      top: 740px;
      left: 50%;
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
      }
    .advertising:hover {
      top: 740px;
      left: 50%;
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
      right: auto;
      }
    .fashion {
      top: 1240px;
      left: 50%;
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
      }
    .fashion:hover {
      top: 1240px;
      left: 50%;
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
      right: auto;
      }
    .lingerie {
      top: 1455px;
      left: 50%;
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
      }
    .lingerie:hover {
      top: 1455px;
      left: 50%;
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
      right: auto;
      }
    .landscape {
      height: 190px;
      width: 300px;
    }
    .line_bottom {
      width: 197px;
    }
    .be {        
      width: 200px;
    }
    .ha {
      width: 110px;
    }
    .ad {
      width: 115px;
    }
    .fa {
      width: 145px;
    }
    .lin {
      width: 120px;
    }
  }

I tried changing

@media only screen and (min-width: 230px) and (max-width: 650px)

to

@media only screen and (min-width: 230px) and (max-width: 650px) and (orientation:landscape)

So one media querie for landscape and one for portrait, both with the same css, whitout succes. Then all so portrait works fine, landscape ingnored.

Viewport is set to

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

I tried to load it to my friends own server, but that didn't change anything. I know have solved it by making 2 section one fot landscape and one for portrait, so I can display ore hide them with display:none on portrait or landscape. But I am just curious what I have done wrong and why media queries only not working in landscape.

Thanks

Edited September 10, 2016 by Peter64

dsonesuk · September 10, 2016

Depends if you have placed them in correct order compared to the other media queries used.

Peter64 · September 10, 2016

Thanks for the replay. I hope that this is what you mean. These media queries are in the top of the index.html because the css for these items all so is in the top of the index.html. The order is

@media only screen and (min-width: 230px) and (max-width: 650px) {
css for this width
}

than

@media only screen and (min-width: 651px) and (max-width: 1150px) {
css for this width
}

than

@media only screen and (min-width: 1151px) and (max-width: 1370px) {
css for this width
}

and what I don't understand is why it works on portrait but not on landscape.

Thanks again.

Ingolme · September 10, 2016

Landscape on which device? In landscape the screen is wider, the resulting width may not match the media query you were expecting it to.

Peter64 · September 10, 2016

Correct me if I am wrong, I try to understand html css, but it isn't that easy. For example: when I have an device let's say: heigh 680px width 450px and I turn it 90 degrees so the width is 680px and the heigth becomes 450px. Shouldn't it than follow the css from the media queries

@media only screen and (min-width: 651px) and (max-width: 1150px) {
css for this width
}

Or should I allways insert

@media only screen and (min-width: 651px) and (max-width: 1150px) and (orientation:portrait) {
css for this width
}

@media only screen and (min-width: 651px) and (max-width: 1150px) and  (orientation:landscape){
css for this width
}

so landscape and portrait insert separate allthough the css is the same for both off them? I am honest I have tried building a website a few times but media queries worked allways like expected.

thanks

Edited September 10, 2016 by Peter64

Ingolme · September 10, 2016

I don't think the orientation property is necessary. Yes, the first media query you showed should apply to a screen that's 680 pixels wide.

Without actually seeing the page that's not behaving correctly it's hard to know why it's not working.

Peter64 · September 10, 2016

Sorry about that, I have forgotten to add the link: http://psteintj.home.xs4all.nl/

Thanks

Ingolme · September 10, 2016

I don't fully understand your requirements. Is portrait supposed to look the same as landscape?

Your media query only works for devices 650 pixels wide and smaller. If the device in landscape is larger than that then it's not going to work. It's doing exactly what you asked it to do.

dsonesuk · September 11, 2016

You have links to css files placed outside the head between <html> and <head> tags which must be done by JavaScript, as they are not seen when viewing actual page source, you are mixing the default styling (css outside media queries) together, when you should have default styling at top, and media queries below the default styling.

I have only seen portrait/landscape used to target specific devices ipads or iphone to adjust there specific styling (for example there menus).

example

    /* Large Devices, Wide Screens */
            body > div:after {content: "Non-Mobile----Default Larger Devices, Wider than Screens-1200+"; }
            @media only screen and (max-width : 1200px) {
                body > div:after {content: "Non-Mobile----Large Devices, Wide Screens-1200"; }
            }

            /* Medium Devices, Desktops */
            @media only screen and (max-width : 992px) {
                body > div:after {content: "Non-Mobile----Medium Devices, Desktops-992"; }
            }

            /* Small Devices, Tablets */
            @media only screen and (max-width : 768px) {
                body > div:after {content: "Mobile----Small Devices, Tablets-768"; }
            }

            /* Extra Small Devices, Phones */
            @media only screen and (max-width : 480px) {
                body > div:after {content: "Non-Mobile----Extra Small Devices, Phones-480"; }
            }

            /* Custom, iPhone Retina */
            @media only screen and (max-width : 320px) {
                body > div:after {content: "Non-Mobile----Custom iPhone-Retina: 320"; }
            }

            /* Smartphones (portrait and landscape) ----------- */
            @media only screen
            and (min-device-width : 320px)
            and (max-device-width : 480px) {
                body > div:after {content: "smartphones: 320-480- P-L";}
            }

            /* Smartphones (landscape) ----------- */
            @media only screen
            and (max-width : 480px) {
                body > div:after {content: "smartphones: 480-L";}
            }

            /* Smartphones (portrait) ----------- */
            @media only screen
            and (max-width : 320px) {
                body > div:after {content: "smartphones: 320- P";}
            }

            /* iPads (portrait and landscape) ----------- */
            @media only screen
            and (min-device-width : 768px)
            and (max-device-width : 1024px) {
                body > div:after {content: "iPads: 768-1024- P-L";}
            }

            /* iPads (landscape) ----------- */
            @media only screen
            and (min-device-width : 768px)
            and (max-device-width : 1024px)
            and (orientation : landscape) {
                body > div:after {content: "iPads: 768-1024-L";}
            }

            /* iPads (portrait) ----------- */
            @media only screen
            and (min-device-width : 768px)
            and (max-device-width : 1024px)
            and (orientation : portrait) {
                body > div:after {content: "iPads: 768-1024- P";}
            }

            /* iPhone 6 in portrait & landscape*/

            @media only screen
            and (min-device-width : 375px)
            and (max-device-width : 667px) {
                body{background-color: red;}
                body > div>p:after {content: "iPhone 6:  375-667-P-L";}
            }


            /*iPhone 6 in landscape*/

            @media only screen
            and (min-device-width : 375px)
            and (max-device-width : 667px)
            and (orientation : landscape) {
                body{background-color: red;}
                body > div>p:after {content: "iPhone 6:  375-667-L";}
            }

            /*iPhone 6 in portrait*/

            @media only screen
            and (min-device-width : 375px)
            and (max-device-width : 667px)
            and (orientation : portrait) {
                body{background-color: red;}
                body > div>p:after {content: "iPhone 6:  375-667-P";}
            }

            /*iPhone 6 Plus in portrait & landscape*/

            @media only screen
            and (min-device-width : 414px)
            and (max-device-width : 736px) {
                body{background-color: red;}
                body > div>p:after {content: "iPhone 6 Plus:  414-736-P-L";}
            }

            /*iPhone 6 Plus in landscape*/

            @media only screen
            and (min-device-width : 414px)
            and (max-device-width : 736px)
            and (orientation : landscape) {
                body{background-color: red;}
                body > div>p:after {content: "iPhone 6 Plus:  414-736-L";}
            }

            /*iPhone 6 Plus in portrait*/

            @media only screen
            and (min-device-width : 414px)
            and (max-device-width : 736px)
            and (orientation : portrait) {
                body{background-color: red;}
                body > div>p:after {content: "iPhone 6 Plus:  414-736-P";}
            }

            /*iPhone 5 & 5S in portrait & landscape*/

            @media only screen
            and (min-device-width : 320px)
            and (max-device-width : 568px) {
                body{background-color: red;}
                body > div>p:after {content: "iPhone 5 & 5s:  320-568-P-L";}
            }

            /*iPhone 5 & 5S in landscape*/

            @media only screen
            and (min-device-width : 320px)
            and (max-device-width : 568px)
            and (orientation : landscape) {
                body{background-color: red;}
                body > div>p:after {content: "iPhone 5 & 5s:  320-568-L";}
            }

            /*iPhone 5 & 5S in portrait*/

            @media only screen
            and (min-device-width : 320px)
            and (max-device-width : 568px)
            and (orientation : portrait) {
                body{background-color: red;}
                body > div>p:after {content: "iPhone 5 & 5s:  320-568-P";}
            }

            /*iPhone 2G-4S in portrait & landscape*/

            @media only screen
            and (min-device-width : 320px)
            and (max-device-width : 480px) {
                body{background-color: red;}
                body > div>p:after {content: "iPhone 2G - 4s:  320-480-P-L";}
            }

            /*iPhone 2G-4S in landscape*/

            @media only screen
            and (min-device-width : 320px)
            and (max-device-width : 480px)
            and (orientation : landscape) {
                body{background-color: red;}
                body > div>p:after {content: "iPhone 2G - 4s:  320-480-L";}
            }

            /*iPhone 2G-4S in portrait*/

            @media only screen
            and (min-device-width : 320px)
            and (max-device-width : 480px)
            and (orientation : portrait) {
                body{background-color: red;}
                body > div>p:after {content: "iPhone 2G - 4s:  320-480-P";}
            }

As you pass from different widths text will show to identify current media query used.

Also iphone uses a higher scale than 1.0, which was brought up in a topic several months ago, in its newer phones

Peter64 · September 11, 2016

Thanks to the both of you for your answers. My head section looks like:

<head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <!--[if IE]><meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'><![endif]-->
    <title>IVO RIKKERT FASHION BEAUTY PHOTOGRAPHER-  EDITORIAL COMMERCIAL ADVERTISING PHOTOGRAPHY</title>
    <meta name="description" content="Netherlands | Germany | Beauty | Music | Advertising | Commercial | High Fashion | Photography. Estetica Magazine, Famous, FHM, Fuente International. Popular Best...">
    <meta name="keyword" content="Estetica Magazine, Famous, FHM, Fuente International">
    <meta name="HandheldFriendly" content="True" />
    <meta name="MobileOptimized" content="320"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>

    html * {
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    *, *:after, *:before {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }
    *::after, *::before {
      content: '';
    }

some more in-line css

   </style>

</head>

When I look in firebug I see that css-style_sheet is loaded before the head section, but they only way I load css is with javascript that is placed at the bottom of the page (Could that be the reason that it appears at the top, above the head section?)

The css and js is loaded like:

    </main>

    <script>
    var cb = function() {
    var l = document.createElement('link'); l.rel = 'stylesheet';
    l.href = 'css/style.css';
    var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
    };
    var raf = requestAnimationFrame || mozRequestAnimationFrame ||
    webkitRequestAnimationFrame || msRequestAnimationFrame;
    if (raf) raf(cb);
    else window.addEventListener('load', cb);
    </script>
    <script>
    var cb = function() {
    var l = document.createElement('link'); l.rel = 'stylesheet';
    l.href ='https://fonts.googleapis.com/css?family=Raleway;';
    var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
    };
    var raf = requestAnimationFrame || mozRequestAnimationFrame ||
    webkitRequestAnimationFrame || msRequestAnimationFrame;
    if (raf) raf(cb);
    else window.addEventListener('load', cb);
    </script>

    <script type="text/javascript">
    function downloadJSAtOnload() {
    var element = document.createElement("script");
    element.src = "js/jquery-2.1.4.js";
    document.body.appendChild(element);
    }
    if (window.addEventListener)
    window.addEventListener("load", downloadJSAtOnload, false);
    else if (window.attachEvent)
    window.attachEvent("onload", downloadJSAtOnload);
    else window.onload = downloadJSAtOnload;
    </script>


</body>
</html>

After the closing main tag and before the closing body tag.

I have added three breaking lines for the working section:

 @media only screen and (min-width: 230px) and (max-width: 650px) { 
some css
}

@media only screen and (min-width: 651px) and (max-width: 1150px) {
some css
}

@media only screen and (min-width: 1151px) and (max-width: 1370px) {
some css
}

when displayed on mobile the images should be organized in portrait as well as in landscape like the correct image,

https://flic.kr/p/L9tiej

but in landscape the images are organized like the wrong image

https://flic.kr/p/LW2dVU

Sorry but I really don't understand why media queries ia working for portrait, but is ignored in landscape.

Thanks again.

Edited September 11, 2016 by Peter64

dsonesuk · September 11, 2016

Insert BEFORE head tag? <head>, link for css should be within the <head> tag, if it is going to be before anything it should be before the <style> tag.

Peter64 · September 11, 2016

I have add the css with javascript, I changed that position in the head section just before <style> like displayed below

 <title>IVO RIKKERT FASHION BEAUTY PHOTOGRAPHER-  EDITORIAL COMMERCIAL ADVERTISING PHOTOGRAPHY</title>
    <meta name="description" content="Netherlands | Germany | Beauty | Music | Advertising | Commercial | High Fashion | Photography. Estetica Magazine, Famous, FHM, Fuente International. Popular Best...">
    <meta name="keyword" content="Estetica Magazine, Famous, FHM, Fuente International">
    <meta name="HandheldFriendly" content="True" />
    <meta name="MobileOptimized" content="320"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script>
    var cb = function() {
    var l = document.createElement('link'); l.rel = 'stylesheet';
    l.href = 'css/style.css';
    var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
    };
    var raf = requestAnimationFrame || mozRequestAnimationFrame ||
    webkitRequestAnimationFrame || msRequestAnimationFrame;
    if (raf) raf(cb);
    else window.addEventListener('load', cb);
    </script>
    <script>
    var cb = function() {
    var l = document.createElement('link'); l.rel = 'stylesheet';
    l.href ='https://fonts.googleapis.com/css?family=Raleway;';
    var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
    };
    var raf = requestAnimationFrame || mozRequestAnimationFrame ||
    webkitRequestAnimationFrame || msRequestAnimationFrame;
    if (raf) raf(cb);
    else window.addEventListener('load', cb);
    </script>
    <style>

    html * {
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
etc.

But still when I check with firebug it appears like it is befor the <head> tag, when I think that the java script for defer loading is doing this. But although I replace the css or remove the javascript media queries only work in portrait and not in Landscape.

Edited September 11, 2016 by Peter64

dsonesuk · September 11, 2016

No! this refers to <head> tag

var h = document.getElementsByTagName('head')[0]

this refers to <html> tag

h.parentNode

THIS inserts new element 'l' before second argument 'h' which equals <head> tag from parent <html>.

.insertBefore(l, h);

Peter64 · September 11, 2016

But when I change

    <script>
    var cb = function() {
    var l = document.createElement('link'); l.rel = 'stylesheet';
    l.href = 'css/style.css';
    var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
    };
    var raf = requestAnimationFrame || mozRequestAnimationFrame ||
    webkitRequestAnimationFrame || msRequestAnimationFrame;
    if (raf) raf(cb);
    else window.addEventListener('load', cb);
    </script>
    <script>
    var cb = function() {
    var l = document.createElement('link'); l.rel = 'stylesheet';
    l.href ='https://fonts.googleapis.com/css?family=Raleway;';
    var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
    };
    var raf = requestAnimationFrame || mozRequestAnimationFrame ||
    webkitRequestAnimationFrame || msRequestAnimationFrame;
    if (raf) raf(cb);
    else window.addEventListener('load', cb);
    </script>

to

<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway;">

Than firebug shows me that it is placed in the head section allthough the position in the head is equal to the javascript one.

Sadly enough it doesn't change anything for the position of the elements in the work section on landscape.

dsonesuk · September 11, 2016

But you expect, it seems whether viewed portrait or landscape the layout will be the same? THERE different WIDTH'S the width determine which media query to follow, it does not matter if portrait or landscape if it is within that media query width range it will follow that css styling, IF you want it to be the same you would have to adjust design to make layout be same portrait view width, whether viewed portrait or landscape, and adjust animation to match that.

Peter64 · September 11, 2016

Okay, I start from scratch, with an media queries for portrait and for landscape with there own width. Maybe that will turn out like I want to.

Many thanks for your help.

dsonesuk · September 11, 2016

Looking at it again, you could use calc() to calculate to portrait width for landscape view using 100vh

Similar to

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" />
        <title>Document Title</title>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script  type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
        <script type="text/javascript">

        </script>

        <style>
            .work_container {min-height: 200px; background-color: purple; }


            @media only screen and (min-width: 230px) and (max-width: 650px) { body { background-color: red;}}
            @media only screen and (min-width: 651px) and (max-width: 1150px) { body  {background-color: orange;}}
            @media only screen and (min-width: 1151px) and (max-width: 1370px){ body  {background-color: yellow;}}

            @media only screen
            and (min-width: 651px)
            and (max-width: 1150px)
            and  (orientation: landscape){
                .work_container {
                    width: calc(100vh - 30px);/* -30px allowing for padding from edge*/
                    background-color: lime;
                    margin: 0 auto;
                }
            }
            @media only screen
            and (min-width: 450px)
            and (max-width: 1150px)
            and  (orientation: portrait){
                .work_container {

                    background-color: green;
                }
            }

        </style>


    </head>
    <body>
        <div class="work_container"><p></p></div>
    </body>
</html>

So in landscape view adjust width of container to viewport height (vertical height), but there maybe support issue in some browsers.

This is test using you 450 x 800 example.

I used firefox resposive design mode cause i found you have more control when creating custom sizes.

Peter64 · September 12, 2016

I will trie this, many thanks for your help and time.

Peter64 · September 12, 2016

Sorry should be: I will try this, many thanks for your help and time.

media queries ignored in landscape

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in