media Queries not working for certain triggers

Question

First time working with media queries and I'm a bit lost.

I have linked an external .css to my html UNDERNEATH my default styles as such:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width"> 
<title>Title</title>

 <link rel="stylesheet" href="./css/style.css" />
 <link rel='stylesheet' href='./css/breakpoints.css' />

In my breakpoints.css I have:

@media screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
 body{
   background:green;}
 .icon{
   display:none;}
      }
}

@media screen 
and (min-width : 1224px) {
 body{
  background:red;
 }
 header.nav{
  display:none;
  }
}

@media screen and (min-device-width : 320px) and (max-device-width : 480px)

Works, but

@media screen and (min-width : 1224px)

does not. I see no change with my desktop media queries and I'm at a total lost. I'm not sure what I am doing wrong??? thanks!

You are missing the body class in your second rule. Is that the problem? — Ufuk Hacıoğulları
solved! I needed the syntax: @media all (min-width : 1224px) — Seven N

technology101010 technology101010 · Accepted Answer · 2015-02-07T18:27:25

The correct syntax for responsive CSS is always helpful. You pretty much only need 2, these I'm sure will help someone in the future. Now design your site for like 2000px wide or so and then only apply the MAX-WIDTH css property. Very handy, I use this for all my mobile / ipad / resonsive designs.

/* AT 750 PX AND LESS DO THIS */
@media (max-width: 750px) {
.something{
}
}

/* AT 750 PX AND MORE DO THIS */
@media (min-width: 750px) {
.something{
}
}

media Queries not working for certain triggers

1 Answers