html - Media Queries are working but the reverse to how they should -

I am trying to create a website for a while that fixes in landscape mode on all devices smaller than a tablet But this is a real headache I do not know what I am doing, or what I am doing wrong

I think my media query is all wrong I started portrait mode Should be in, but when viewed on a mobile device After much Tinkring fixes in landscape mode, I have had almost worked, but it is the wrong time! On desktop it is in landscape mode and then on mobile device it is in portrait mode! This is joking me! Lol

Here's my attempt to get this code to work. Can anyone tell me why this code is not working?

CSS

; Padding: 0; Height: 100%; Hidden flurry; } # Content {status: absolute; Left: 0; Correct: 0; Bottom: 0; Top: 0 pixels; Top: -15px; Minimum height: 100%; Minimum width: 100%; } Html, body {height: 100%; Minimum height: 100%; } @ Media screen and (min-shape-ratio: 2/1) {body} {transform: rotate (90 degrees); Change-origin: 50% 50%; }}

HTML

  & lt; Div id = "content" & gt; & Lt; iframe src = "// fast.wistia.net/embed/iframe/qnca9gdlv5?videoFoam=true" allowtransparency = "true" frameborder = "0" scrolling = "no" class = "Wistia_embed" name = "wistia_embed" allowfullscreen Mojholaofloskrin Vebkitolofloskrin Olfofloscrew msallowfullscreen width = "640" height = "388" & gt; & Lt; / Iframe & gt; & Lt; Script src = "// fast.wistia.net/assets/external/E-v1.js"> & Lt; / Script & gt; & Lt; / Div & gt;  

UPDATE

I now correct rotation on small device size of desktop browser There is still no rotation.