メディアクエリがブラウザまたはモバイルデバイスで認識されない

Question

レスポンシブなレイアウトを作成しようとしていますが、何らかの理由でメディアクエリに関連するCSSをラップすると認識されません。つまり、私のブラウザウィンドウやiPhoneでチェックアウトしても、CSSは適用されません。私はここで何が間違っているのか分かりません。ここでは、関連するコード（したがって、すべての括弧のもの、私はワードプレスの中にプラグインタイプで働いていることに注意）です。

HTMLは

<div class="client-stats"> 
    <h3>Stats</h3> 
    <p><strong>Event Date:</strong> [types field="date-of-event" style="text" format="F j, Y"][/types] </p> 
    <p><strong>Event Type:</strong> [types field="event-type"][/types]</p> 
    <p><strong>Special Effects:</strong> [types field="special-effects"][/types] 
    <p><strong>Equipment Used:</strong> [types field="equipment-used"][/types]</p> 
</div> 

<div class="client-description">  
    <div class="portfolio-description"> 
    [wpv-post-body view_template='None'] 
    </div>  
</div> 

CSS

.client-stats { 
    width: 325px; 
    float: left; 
    margin-right: 15px; 
    padding: 0 7px 0 35px; 
    background-color: #333; 
    background-image: url('/wp-content/uploads/2016/05/paper-1.jpg'); 
    min-height: 350px; 
    line-height: 1.5; 
    color: #fff; 
} 

.client-stats p, strong, h3 { 
    font-family: "Courier New",monospace; 
} 

.client-stats h3 { 
    text-transform: uppercase; 
    margin-bottom: 20px; 
    color: #fff; 
} 

.client-stats strong { 
    text-decoration: underline; 
    font-family: "Courier New",monospace; 
} 

.client-description { 
    margin-left: 350px; 
} 

@media only screen and (max-width: 768) { 
    .client-stats { 
    width: 100%; 
    float: none; 
    margin-right: 0; 
    } 

    .client-description { 
    width: 100%; 
    margin-left:0; 
    } 
} 

私が削除した場合メディアクエリーラップ、CSSはうまく適用されます（つまり、CSSルールではなく、特に問題です）。それは場合に役立ちます

関連ページは、ここにある：http://107.170.41.117/client/client-6/

Answer 1

@media only screen and (max-width: 768) { 

CSSの長さは、単位が必要です。 768は有効な幅ではありません。

これはused a validatorだった場合に選択されていました。