CODEWITHSUNDEEP
cssmedia-queries
LoneXcoder
LoneXcoder

Reputation: 2163

divs Display property change via CSS media query

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 ?

Upvotes: 0

Views: 595

Answers (4)

nstCactus
nstCactus

Reputation: 5193

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/

Upvotes: 1

Rohit416
Rohit416

Reputation: 3496

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.

Upvotes: 0

belens
belens

Reputation: 962

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.

Upvotes: 1

Nitesh
Nitesh

Reputation: 15779

Try using display:block instead of display:inline-block for class Middle

Upvotes: 0

Related Questions