Peter64 Posted September 10, 2016 Share Posted September 10, 2016 (edited) 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 Link to comment Share on other sites More sharing options...
dsonesuk Posted September 10, 2016 Share Posted September 10, 2016 Depends if you have placed them in correct order compared to the other media queries used. Link to comment Share on other sites More sharing options...
Peter64 Posted September 10, 2016 Author Share Posted 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. Link to comment Share on other sites More sharing options...
Ingolme Posted September 10, 2016 Share Posted 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. Link to comment Share on other sites More sharing options...
Peter64 Posted September 10, 2016 Author Share Posted September 10, 2016 (edited) 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 Link to comment Share on other sites More sharing options...
Ingolme Posted September 10, 2016 Share Posted 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. Link to comment Share on other sites More sharing options...
Peter64 Posted September 10, 2016 Author Share Posted September 10, 2016 Sorry about that, I have forgotten to add the link: http://psteintj.home.xs4all.nl/ Thanks Link to comment Share on other sites More sharing options...
Ingolme Posted September 10, 2016 Share Posted 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. Link to comment Share on other sites More sharing options...
dsonesuk Posted September 11, 2016 Share Posted 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 Link to comment Share on other sites More sharing options...
Peter64 Posted September 11, 2016 Author Share Posted September 11, 2016 (edited) 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 Link to comment Share on other sites More sharing options...
dsonesuk Posted September 11, 2016 Share Posted 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. Link to comment Share on other sites More sharing options...
Peter64 Posted September 11, 2016 Author Share Posted September 11, 2016 (edited) 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 Link to comment Share on other sites More sharing options...
dsonesuk Posted September 11, 2016 Share Posted 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); Link to comment Share on other sites More sharing options...
Peter64 Posted September 11, 2016 Author Share Posted 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. Link to comment Share on other sites More sharing options...
dsonesuk Posted September 11, 2016 Share Posted 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. Link to comment Share on other sites More sharing options...
Peter64 Posted September 11, 2016 Author Share Posted 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. Link to comment Share on other sites More sharing options...
dsonesuk Posted September 11, 2016 Share Posted 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. 1 Link to comment Share on other sites More sharing options...
Peter64 Posted September 12, 2016 Author Share Posted September 12, 2016 I will trie this, many thanks for your help and time. Link to comment Share on other sites More sharing options...
Peter64 Posted September 12, 2016 Author Share Posted September 12, 2016 Sorry should be: I will try this, many thanks for your help and time. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now