trying to set different layout using media queries i have truble with defining divs layout according to the screen width
this is the fiddle result
and the fiddle test project i am using
the problem is i would like it to get stack on top of others
red
green
blue
when hitting less then 1200 px
what am i doing wrong ?
The main problem you are having is that CSS is ignoring your @media code. You are using inline CSS, and inline CSS rules always wins from external CSS rules (== your @media code).
recommend reading up on the cascading order of CSS: http://monc.se/kitchen/38/cascading-order-and-inheritance-in-css
For your jsfiddle, transfer all code from the style="..." to your css frame on the right, making it external css instead of internal CSS. Then just reorder it like this: if you want media to override default css, place your @media selector under the code you want to be overridden.
Not sure if this is what you want but check this out: http://jsfiddle.net/4v6FC/11/embedded/result/
I think you have a problem with css rules precedence: the display property defined in the style attribute of your div elements have more precedence than the one defined in your stylesheet, no matter the screen size.
For the example I just set this property for all div elements, outside the media query, and removed the display property from the style attribute.
Here is an article explaining cess rules precedence : http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/
Try using display:block instead of display:inline-block for class Middle
the problem is you have three containers who are taking the width and have display:inline-block. so they will be aligned parallel to each other. if you want this behavior, then you must warp them in a outer container and set its min-width to make it placed fixed in that position by specifying divs width in px rather than in %, see here.
if you want elements to stack over each other then you must use display:block. in this case you don't need anything else.
