CODEWITHSUNDEEP
htmlcssmedia-queries
orglce
orglce

Reputation: 513

Media Queries not working properly

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

Upvotes: 1

Views: 2980

Answers (5)

Tony Virili
Tony Virili

Reputation: 1

Most issues that I have come across with Media Queries not working as expected are due to the order they appear. Sometimes they can get out of order unexpectedly, especially when changing from min to max or vice versa.

When using max-width, check to make sure all queries appear largest to smallest width (1200px, then 992px, etc).

When using min-width, check to make sure all queries appear smallest width to largest (576px, then 768px etc).

Upvotes: 0

Mary
Mary

Reputation: 1

I had the same problem after css lint suggested to remove * { margin: 0; padding: 0;

I replaced that and media queries worked again.

Upvotes: 0

user4563161
user4563161

Reputation:

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>

Upvotes: 2

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29683

It works as expected but you have some problem in code inside your media query. You are referring it as class instead of id

@media (max-width: 720px) {
    /*this is id but you just referred it with .logo which isn't present*/
    #logo {
        margin-top: 30px;
        margin-bottom: 20px;
        width: 100%;
    }

    /*only this piece of query works*/
    .text {
        border-bottom: 2px solid red;
    }

    .gif {
        clear: right;
    }
}

Upvotes: 1

Pixelomo
Pixelomo

Reputation: 6737

on your desktop code you target logo as an id #logo and in your media query you target it as a class .logo

Upvotes: 1

Related Questions