CODEWITHSUNDEEP
htmlcss
programmingnewb
programmingnewb

Reputation: 129

media queries not responding to the proper screen size

I'm using the latest version of Firefox and my media queries are mostly working fine. The strange thing is that they aren't responding in the correct way to my screen size. Here is the example:

.div{
    float:left;
    width:50%;
    text-align:left;
    color:#000000;
    line-height:18px;
    margin-right:15px;
    display:inline;
} 

@media all and (max-width:1366px){.div{
    float:left;
    width:40%;
    text-align:left;
    color:#000000;
    line-height:18px;
    margin-right:15px;
    display:inline;
} }

Right now my browser is set to 1600 width, yet it is still using the code within the media query (rather than the default code above). Why would it be doing this when I set (max-width:1366px)? I've noticed this in many other cases throughout my css code. I've worked around it before, but want to make sure there isn't a simple explanation.

Upvotes: 0

Views: 107

Answers (2)

tim
tim

Reputation: 83

It worked this way in latest version of firefox. For a visible change I changed float:left to float:right in @media all and (max-width:1366px)

<!DOCTYPE html>
<html>
<head>
<title>media test</title>
<style>
.div{
    float:left;
    width:50%;
    text-align:left;
    color:#000000;
    line-height:18px;
    margin-right:15px;
    display:inline;
} 

@media all and (max-width:1366px){.div{
    float:right; //just for a visible change
    width:40%;
    text-align:left;
    color:#000000;
    line-height:18px;
    margin-right:15px;
    display:inline;
} }
</style>
</head>
<body>
<div class="div">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras congue, neque a luctus euismod, nisl massa faucibus erat, nec malesuada ante felis eleifend risus. Nullam nec lectus quam. Vestibulum hendrerit erat non tristique interdum. Curabitur pulvinar, risus molestie imperdiet egestas, erat diam mattis lacus, non imperdiet nibh sem id metus. Donec sed est turpis. Proin ultricies pharetra massa eget suscipit. Quisque eget enim placerat, tempor turpis vestibulum, euismod augue. Suspendisse placerat adipiscing porttitor. Nunc tempor vehicula felis at eleifend. Pellentesque vel ornare sem. Sed vitae neque vehicula, malesuada odio sed, dictum elit. Donec enim diam, placerat et ante pulvinar, tempus mattis massa. Fusce tempor dignissim dignissim. Quisque consequat risus id metus porttitor semper. Nunc ut facilisis neque. Vestibulum at ante sem.
</p>
</div>
</body>
</html>

Upvotes: 1

Timmah
Timmah

Reputation: 1335

There's nothing wrong with your queries: Fiddle

Minor thing, you only need to specify properties you want to change, no need to repeat the same thing twice. The styles within media queries cascade just like all CSS.

To troubleshoot the media queries not displaying:

  1. How are you setting your display width?
  2. Do you have your browser zoom set to 100%?
  3. Have you tried setting the media query to a different width to ensure it definitely fires? I've found a tiered set of media queries with an obvious change in each is useful

For example:

@media screen and (max-width:600px) {
    .div {
        background-color:red;
    }
}
@media screen and (max-width:900px) {
    .div {
        background-color:green;
    }
}
@media screen and (max-width:1200px) {
    .div {
        background-color:blue;
    }
}

Upvotes: 0

Related Questions