Media Queries not working properly

Question

I've been trying to write some simple media queries, but I was stuck right after I started. It seems like media queries only work on text and not on divs and images. This is my css code along with the html.

 @media (max-width: 720px) {
   .logo {
     margin-top: 30px;
     margin-bottom: 20px;
     width: 100%;
   }
   <!-- only this 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 to this code image should strech to 100% of the window width right after window size comes under 720px and gif which float to the left of the text should clear its float and go under the image. But nothing happens, except text gets a red border.

I've tried some different formats of media queries, @media () {}, @media screen () {}, @media only screen () {}, @media screen and () {}, @media only screen and () {} but none of these seem to work for images and divs.

Here is my whole code:

http://pastebin.com/0bvUrZnU

Answer 1

OK so your media queries are not great.

Firstly lets change media to : @media handheld,screen and (max-width: 720px)

This will allow your query to be read across the board by DPI changes resolution changes it will even work in things like iframes and pretender box's and emulators it all basically.

Now also as a rule of thumb your media queries should be at the bottom of your style sheet. We do this because style sheets are read from top to bottom so all overriding styles should go underneath original style rule's.

so you want this :

You were missing a . before text and also use float:none; when canceling a float.

I have also tidied up your html a little also with <img> tags always define the height and width withing the tag itself like so <img width="300" height="100" /> and then use css to override it. this is so the browser can render the image faster because it knows its proportion's & you should all ways have an alt attribute. finally images are not wrappers they do not need to end in </img> instead just finish it all off like this: <img width="300" height="100" alt="iam an image and if i wanted to be responsive i should have max-width:100%; height:auto; as my 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 and (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 and use width and height" />
  </div>

  <div class="text">some text ...</div>

  <div class="gif">
    <img src="under_construction.gif" alt="all images should have alts and use width and height" />
  </div>
</center>