Why media queries not using the correct CSS

问题:

I have the following HTML:

<div class="section group">
    <div class="col span_1_of_3 articleTeaserBoxColor">
        <div class="test2n">
            <div class="imgHolder"><img id="NewsArticle_2790_image" class="imgArtThumb" title="" alt="" src="artOne.png" /></div>
            <div class="textHolder">
                <div class="textHolderTop"><a href="/template.aspx?id=2790" class="" title="">Care on the Fast Track</a></div>
                <div class="textHolderBottom">The National Cancer Institute</div>
            </div>
        </div>
    </div>
    <div class="col span_1_of_3 articleTeaserBoxColor">
        <div class="test2n">
            <div class="imgHolder"><img id="NewsArticle_2792_image" class="imgArtThumb" title=" alt="" src="artThree.png" /></div>
            <div class="textHolder">
                <div class="textHolderTop"><a href="/template.aspx?id=2792" class="" title="">Stay Connected</a></div>
                <div class="textHolderBottom">tool for interacting with your provider and following your healthcare</div>
            </div>
        </div>
    </div>
    <div class="col span_1_of_3 articleTeaserBoxColor">
        <div class="test2n">
            <div class="imgHolder"><img id="NewsArticle_2791_image" class="imgArtThumb" title="" alt="" src="artTwo.png" /></div>
            <div class="textHolder">
                <div class="textHolderTop"><a href="/template.aspx?id=2791" class="" title="">Know When Antibiotics Work and When They Don't</a></div>
                <div class="textHolderBottom">If you or your child has a virus, antibiotics will not help you or him/her</div>
            </div>
        </div>
    </div>
</div>

CSS:

.imgArtThumb
{
    max-width: 100%;
    height: auto;
}

.aTitle
{
    font-size: 16px !important;
    font-weight: bold;
    color: #F67D24;
    margin-top: 15px;
    margin-bottom: 15px;
}
.test2
{
    padding: 8px;
    text-align: left;
    box-shadow: inset 0 -1px 1px rgba(0,0,0,0.5), inset 0 1px 1px rgba(238,146,85,1);
}
.test2n
{
    text-align: left;
    height: 95%;
    width: 95%;
    padding: 2%;
    overflow: hidden;
}
.articleTeaserBoxColor
{
    vertical-align: top;
    box-shadow: inset 0 -1px 1px rgba(0,0,0,0.5), inset 0 1px 1px rgba(238,146,85,1);
}
.test2 p, .test2n p
{
    text-align: left;
}
.setP p
{
    text-align: left;
    padding: 10px 10px 0 0;
}
.setP article
{
    text-align: left;
    padding: 10px 0 0 0;
}

/*  SECTIONS  */
.section {
    clear: both;
    padding: 0px;
    margin: 0px;
    height: auto;
    overflow: auto;
    text-align: center;
    width: 100%;
}

/*  COLUMN SETUP  */
.col {
    display: block;
    /*float:left;*/
    display: inline-block;
    margin: 1% 0 1% 0;
}
.col:first-child {
    margin-left: 0;
}


/*  GROUPING  */
.group:before, .group:after {
    content: "";
    display: table;
}
.group:after {
    clear: both;
}
.group {
    zoom: 1; /* For IE 6/7 */
}

/*  GRID OF THREE  */
.span_3_of_3 {
    width: 100%;
}
.span_2_of_3 {
    width: 66.1%;
}
.span_1_of_3 {
    width: 32.2%;
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 820px) {
    .col { 
        margin: 1% 0 1% 0%;
        padding-bottom: 10px;
    }
}

@media only screen and (max-width: 820px) {
    .span_3_of_3 {
        width: 100%; 
    }
    .span_2_of_3 {
        width: 100%; 
    }
    .span_1_of_3 {
        width: 98%;
    }
    .imgArtThumb {
        width: 100%;
        height: 110px;
    }
    .setTableCell
    {
        display: block;
    }
}

.imgHolder
{
    float: left;
    display: inline-block;
    width: 43%;
    padding-right: 2%;
    height: 100%;
}
.textHolder
{
    float: left;
    display: inline-block;
    width: 55%;
    height: 100%;
}
.textHolderTop
{
    width: 100%;
    height: 48%;
    text-align: left;
    padding-bottom: 2%;
    overflow: hidden;
}
.textHolderBottom
{
    width: 100%;
    height: 48%;
    overflow: hidden;
    text-align: left;
    padding-bottom: 2%;
}
.setTableCell
{
    display: table-cell;
}

At full desktop width page this is what I see:

At smaller screen (mobile) this is what I see:

If I remove the text or unchecked table-cell from the developer tool from the image below, it works fine. But I am not sure why the display: block is cancelled out if the screensize matches the condition.

How can I resolve it

回答1:

In your css, .setTableCell is assigned display:table-cell below the media query part. Move it higher or give the media query a narrower selector; just being inside a media query block does not give it higher priority.