Media Queries are working but the reverse to how they should

Question

I have been trying for a while now to build a website that fixes in landscape mode on all devices smaller than a tablet however this has been a real headache. I have no idea what I am doing, or what I am doing wrong.

I think my media query is all wrong. I need the website to be in portrait mode to begin with but when viewed on a mobile device it fixes in landscape mode. After much tinkering, I have got it almost working but it is round the wrong way! on desktop it is in landscape mode and then on a mobile device it is in portrait mode! Its mocking me!lol

Here is a livelink of my attempt at getting this code to work. Could somebody please tell me why this code is not working? If you resize the browser you will see for yourself what is wrong.

Below is my code.

CSS

body, html {
    margin: 0; padding: 0; height: 100%; overflow: hidden;
}
#content {
    position:absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0px;
    top: -15px;
    min-height: 100%;
    min-width: 100%;
}
html, body {
    height: 100%;
    min-height: 100%;
}

@media screen and (min-aspect-ratio: 2/1) {
    body {
        transform: rotate(90deg);
        transform-origin: 50% 50%;
    }
}

HTML

<div id="content">
        <iframe src="//fast.wistia.net/embed/iframe/qnca9gdlv5?videoFoam=true" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" allowfullscreen mozallowfullscreen webkitallowfullscreen oallowfullscreen msallowfullscreen width="640" height="388"></iframe><script src="//fast.wistia.net/assets/external/E-v1.js">   </script>
</div>

UPDATE

I have now corrected the rotation on a smaller resized desktop browser size however on mobile device there is still no rotation.

You referenced [my example](http://stackoverflow.com/questions/27012827/can-we-make-our-webpage-open-defaultly-in-landscape-mode-for-mobile-tablets-usin/27014471#27014471) in a question you asked earlier . What was the issue you had with that code? I think it should do exactly what you are attempting — Turnip, Mar 17 '15 at 20:38

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

0

@media (max-width: 600px)
body {
  transform: rotate(90deg);
  transform-origin: 50% 50%;
}

Above css is changing the height and width of the body

ex: normally

-----40px-----

|
|
|
100px
|
|
|

is rotated by 90 deg and becomes

-----100px-----

|
|
|
40px
|
|
|

This css must be helpful

@media (max-width: 600px)
iframe {
  transform: rotate(90deg);
  /* transform-origin: 50% 50%; */
  width: 100vw!important;
  height: 100vh!important;
}

edited Jun 20 '20 at 09:12

Community

1
1

answered Mar 17 '15 at 20:35

avnaveen

562
2
4
10

Hi thanks so much that makes it so much clearer, but it simply will not work. everybody says it should but it doesn't if you look at my liveink above and view the code you will see it should work perfectly but it doesnt. – jeff rush Mar 18 '15 at 10:05

Media Queries are working but the reverse to how they should

UPDATE

1 Answers1