styles over riding styles when using #media in css - html

Question

So I am having a noob issue, one that is annoying me greatly. So I have the following type of style sheet:
#content .post-content .row .col-md-6 .box-top {
background: #714f46;
padding: 10px;
color: #fff;
text-align: center;
font-family: "custom-script";
position: relative;
height: 52px;
font-size: 34px;
padding-top: 12px;
}
#media (min-width: 960px) {
}
#media (min-width: 768px) {
}
#media (min-width: 640px) {
#content .post-content .row .col-md-6 .box-top {
width: 453px;
}
}
#media (min-width: 480px) {
#content .post-content .row .col-md-6 .box-top {
width: 353px;
}
}
Now the issue is that anything over 641px will use the 640px rule. Even if the screen is 1920x1200. I think its because I don't have a width defined for the original element? if thats case, I slap a width on the original element of 453px:
#content .post-content .row .col-md-6 .box-top {
...
width: 453px;
}
But the problem is, its almost like the #media rule has precedence, because in the crhome inspector when the width is 1366px, it still uses the 640px rule instead of the width I just defined. Now I was thinking of, instead of doing: (min-width: xyzpx) I would use max-width but that seems to take a way the smooth scaling down affect that the client wants, they don't want it jumping between media sizes.
Should my element have a max-width of 453px to override the #media rule?
#content .post-content .row .col-md-6 .box-top {
...
max-width: 453px; /** or a min-width: 453px **/
}
Essentially my questions are:
Why is my #media rule overriding any other rule on the page. In this case why is it using the width in the 640 rule to apply to anything above when the original definition of the element in question does not specific a width?
And
Why is when I specify a width for that original definition of the element, that the #media rule, which defined a new width at 640px overrides it, especially when the windows width is say 1366px?

Answer 1

From what I understand your issue is that you want to apply the Non-Mobile First Method, and by using that you have to use the max-width instead of min-width
like this:
/*========== Non-Mobile First Method ==========*/
#media only screen and (max-width : 960px) {
/*your CSS Rules*/
}
#media only screen and (max-width : 768px) {
/*your CSS Rules*/
}
#media only screen and (max-width : 640px) {
/*your CSS Rules*/
}
#media only screen and (max-width : 480px) {
/*your CSS Rules*/
}
#media only screen and (max-width : 320px) {
/*your CSS Rules*/
}
or if you want to use the Mobile First Method then you should use min-width but this way:
/*========== Mobile First Method ==========*/
#media only screen and (min-width : 320px) {
/*your CSS Rules*/
}
#media only screen and (min-width : 480px) {
/*your CSS Rules*/
}
#media only screen and (min-width : 640px) {
/*your CSS Rules*/
}
#media only screen and (min-width : 768px) {
/*your CSS Rules*/
}
#media only screen and (min-width : 960px) {
/*your CSS Rules*/
}
Below is a snippet from what I understand it is what you are looking for:
#content .post-content .row .col-md-6 .box-top {
background: #714f46;
padding: 10px;
color: #fff;
text-align: center;
font-family: "custom-script,arial";
position: relative;
height: 52px;
font-size: 34px;
padding-top: 12px;
}
/*========== Non-Mobile First Method ==========*/
#media only screen and (max-width: 960px) {
/*your CSS Rules*/
}
#media only screen and (max-width: 768px) {
/*your CSS Rules*/
}
#media only screen and (max-width: 640px) {
#content .post-content .row .col-md-6 .box-top {
width: 453px;
}
/*your CSS Rules*/
}
#media only screen and (max-width: 480px) {
/*your CSS Rules*/
}
#media only screen and (max-width: 320px) {
/*your CSS Rules*/
}
<div id="content">
<div class="post-content">
<div class="row">
<div class="col-md-6">
<div class="box-top">Something
</div>
</div>
</div>
</div>
</div>

Answer 2

Try reversing order of your media queries. Smallest min-width first.
Say your window width is 700px. Then (min-width: 960px) and (min-width: 768px) does not match and are skipped but both (min-width: 640px) and (min-width: 480px) do match styles inside these blocks are applied in order they appear in CSS file. And later styles override previous styles, e.g.:
p { color: green; }
p { color: red; }
Your p color would be red.
This live example may be a bit clearer: http://jsbin.com/yuqigedudi/1/edit?html,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
/* Default color when no media queries bellow match.
In this our case when window width < 200px */
p { color: black }
/* If window size >= 200px */
#media (min-width: 200px) {
p { color: red }
}
/* If window size >= 300px */
#media (min-width: 300px) {
p { color: orange }
}
/* If window size >= 400px */
#media (min-width: 400px) {
p { color: blue }
}
</style>
</head>
<body>
<p>
Resize this frame and see my color change!
</p>
</body>
</html>