Why is one of the media query rules not applied? - css

Question

I've recently discovered media queries as a tool, so don't have much experience (seconds day, really).
I have a #logo that uses a margin-left of 7% of the width, but the rule that changes it to 25px doesn't work for some reason. Interestingly, the rest of the particular media query works fine, just the logo one doesn't. What could be the problem?
#media (max-width: 1320px) and (min-width: 105.1px){
#wrapper {
width: 100%;
}
#logo {
width: 195px;
height: 96px;
position: relative;
max-width: 230px;
max-height: 110px;
min-width: 115px;
min-height: 96px;
border: thin solid #000000;
float: left;
margin-left: 25px;
margin-top: -1px;
background-repeat: no-repeat;
background: black;
}
}
#logo {
width: 195px;
height: 96px;
position: relative;
max-width: 230px;
max-height: 110px;
min-width: 115px;
min-height: 96px;
border: thin solid #000000;
float: left;
margin-left: 7%;
margin-top: -1px;
background-repeat: no-repeat;
background: black;
}

Answer 1

Your media query needs to go after the normal set of rules for #logo for your query to override your default rules. You can remove your important flag once you do that.

Answer 2

You need to clean up your media query a bit, as there is some redundancy. Also, you need to decide how you want to structure your CSS, as in mobile first approach or large screen then target down for smaller screens. In your code there isn't really a good reason to use !important as structuring the initial CSS will correct the issue.
Also in your example, a min-width:105 is sort of useless as mobile screens have a min-width of roughly 320px (I'm speaking generally). Here is how you would have it set up if you want all your styles to apply until the screen width goes wider than 1320px.
Here's a jsfiddle as an example: http://jsfiddle.net/disinfor/t9rq36mn/
Note, I changed the (min-width) in the fiddle to 600px so you can actually see it working. You can also change min-width to max-width in the fiddle to see it work in reverse.
MOBILE FIRST APPROACH:
#wrapper {
width: 100%;
}
#logo {
width: 195px;
height: 96px;
position: relative;
max-width: 230px;
max-height: 110px;
min-width: 115px;
min-height: 96px;
border: thin solid #000000;
float: left;
margin-left: 25px;
margin-top: -1px;
background-repeat: no-repeat;
background: black;
}
#media screen and (min-width:1320px) {
#logo {
margin-left: 7%;
}
}
LARGE SCREEN FIRST APPROACH:
#wrapper {
width: 100%;
}
#logo {
width: 195px;
height: 96px;
position: relative;
max-width: 230px;
max-height: 110px;
min-width: 115px;
min-height: 96px;
border: thin solid #000000;
float: left;
margin-left: 7%;
margin-top: -1px;
background-repeat: no-repeat;
background: black;
}
#media screen and (max-width:1319px) {
#logo {
margin-left: 25px;
}
}
Basically, you only need to change the property of the element that actually changes once you reach that media query parameter (min-width, max-width, min-device-width,max-device-width, etc.)
Hopefully that helps clear things up.