0

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 ?

4 Answers 4

1

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.

Sign up to request clarification or add additional context in comments.

2 Comments

I've updated your jsfiddle: jsfiddle.net/4v6FC/13 There are a lot of ways you can use to stack the boxes vertically, if you have any questions, let me know.
that is right . now i had a little problem with the blue (the right one) getting under before intended and this was fixed now by reducing precentege of width to 28% each so now it is breaking line lyout only when intended
1

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/

Comments

0

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

1 Comment

the idea was to have them side by side and then on resizing to <1200
0

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.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.