Bert Starington Bert Starington - 2 months ago 6
CSS Question

Changing the CSS of DIV 2 and 3 ONLY IF DIV 1 is below a certain resolution

Before you try and help me out, look at my previous question to get a basic idea of what I'm trying to accomplish HERE

I want to adjust the positioning and sizes of two divs (logo and menu bar, they are both a different shade of green) that is located within the top div (black bar). The top div automatically adjusts its size according the the screen resolution.

CLICK HERE TO SEE EXAMPLE

You can see how the

black bar
turns
blue
once its
under 320 pixels
. However, I want to adjust the positioning and sizes of the two green bars only when the black bar turns blue. How would I do this?

Help would be appreciated, thank you.

Answer

You can add more styles to the media query declaration:

@media all and (max-width: 320px) {
.menubar {
  /*/ code for below 320px /*/
  background-color:#00F;
  width:100%;
  height:150px;
    position:relative;
}

#top-nav-bar {
    position:absolute;
    bottom:0px;
    top:auto;
}
#top-logo {
    position:absolute;
    top:0px;
}
}

View this demo: http://jsfiddle.net/Rk4mr/7/

Also to be sure your media query styles will work declare it at the bottom of the CSS.

Comments