html - Media Queries not working properly -

i've been trying write simple media queries, stuck right after started. seems media queries work on text , not on divs , images. css code along html.

 @media (max-width: 720px) {     .logo {       margin-top: 30px;       margin-bottom: 20px;       width: 100%;     }     <!-- piece of query works --> .text {       border-bottom: 2px solid red;     }     .gif {       clear: right;     }   }   body {     background-image: url('website/resources/images/body.png')   }   .logo_container {     width: 700px;     height: auto;     margin-top: 60px;     margin-bottom: 40px;   }   #logo {     width: 100%;     height: auto;   }   .text {     font-size: 30px;     margin-bottom: 60px;   }   .gif {     float: right;   }

<center>    <div class="logo_container">      <img id="logo" src="logo.png"></img>    </div>    <div class="text">some text ...</div>    <div class="gif">      <img src="under_construction.gif"></img>    </div>  </center>

acording code image should strech 100% of window width right after window size comes under 720px , gif float left of text should clear float , go under image. nothing happens, except text gets red border.

i've tried different formats of media queries, @media () {}, @media screen () {}, @media screen () {}, @media screen , () {}, @media screen , () {} none of these seem work images , divs.

here whole code:

http://pastebin.com/0bvurznu

ok media queries not great.

firstly lets change media : @media handheld,screen , (max-width: 720px)

this allow query read across board dpi changes resolution changes work in things iframes , pretender box's , emulators basically.

now rule of thumb media queries should @ bottom of style sheet. because style sheets read top bottom overriding styles should go underneath original style rule's.

so want :

you missing . before text , use float:none; when canceling float.

i have tidied html little <img> tags define height , width withing tag <img width="300" height="100" /> , use css override it. browser can render image faster because knows proportion's & should ways have alt attribute. images not wrappers not need end in </img> instead finish off this: <img width="300" height="100" alt="iam image , if wanted responsive should have max-width:100%; height:auto; css rule." />

body {    background-image: url('website/resources/images/body.png')  }  .logo_container {    width: 700px;    height: auto;    margin-top: 60px;    margin-bottom: 40px;  }  #logo {    width: 100%;    height: auto;  }  .text {    font-size: 30px;    margin-bottom: 60px;  }  .gif {    float: right;  }  @media handheld,  screen , (max-width: 720px) {    #logo {      margin-top: 30px;      margin-bottom: 20px;      width: 100%;    }    .text {      border-bottom: 2px solid red;    }    .gif {      float:none;    }  }

<center>    <div class="logo_container">      <img id="logo" src="logo.png" alt="all images should have alts , use width , height" />    </div>      <div class="text">some text ...</div>      <div class="gif">      <img src="under_construction.gif" alt="all images should have alts , use width , height" />    </div>  </center>