Part of a Media Query not working?

Question

I'm currently working on trying to make a shop responsive and I'm having the following issue.

I'm using media queries to style the shop and a particular range within the media query won't the AT ALL.

It works perfectly in the rest of the media queries however, in this particular one it doesn't make any changes.

Here's an example of one of my WORKING media queries:

@media all and (max-width: 685px) and (min-width: 640px)
{
    #ShopMiddleHolderEShop {float:left; width:915px;}
    #rightSideHolder {padding-left:15px; width:37%; float:left; padding-bottom:8px;margin-right:50px;}
    .prodTable {float:left; width:105%}
    #prodListView {float:left; width:240px;}
    .prodTable td {width:130%; float:left;}
    .prodTmbHld {width:80%; margin:8px 0 0 0;/* display: list-item; *//* float: left; */}
    fieldset.prodTmb {/* float:left; */ margin:0 auto;padding:5px 0;width:99.5%; height:150px;}
    .prodTmbImg { width:145px; height:143px; float:right;}
    .prodTmbImg img { width:140px; height:140px; float:left}
    .prodDsc { padding-left:10px; float:left; width:145px; font-size:12px; line-height:14px}
}

And here is the range that DOESN'T work!

@media all and (max-width: 640px) and (min-width: 590px)
{
    #ShopMiddleHolderEShop {float:left; width:915px;}
    #rightSideHolder {padding-left:15px; width:37%; float:left; padding-bottom:8px;margin-right:50px;}
    .prodTable {float:left; width:105%}
    #prodListView {float:left; width:auto; margin-right:320px;}
    .prodTable td {width:130%; float:left;}
    .prodTmbHld {width:70%; margin:8px 0 0 0;/* display: list-item; *//* float: left; */}
    fieldset.prodTmb {/* float:left; */ margin:0 auto;padding:5px 0;width:99.5%; height:150px;}
    .prodTmbImg { width:145px; height:143px; float:right;}
    .prodTmbImg img { width:140px; height:140px; float:left}
    .prodDsc { padding-left:10px; float:left; width:145px; font-size:12px; line-height:14px}
    #viewNav { float:left; width: 170px; border-right:1px solid #8FBCD1}
    #viewNav span { float:left; padding-left:8px}
    #viewNav a {float:left; border-right:1px solid #8FBCD1; padding:0 8px}
    #ShopUnderHeaderHolder { float:left; width:10%; background:#a8a8a8}                         
}

Any help would be greatly appreciated! Thank you!

Answer 1

The issue was that I had overlapping CSS.

I had accidentally copy and pasted the same media query above the one I was working on but it hadn't been closed.

For example:

@media all and (max-width:640px) and (min-width:590px)
{

/*Some code here*/

I removed this code and it worked perfectly!