CSS @Mediaが正しく動作しない

Question

CSSが動作していないように見えて、その理由がわかりません。 - 私はDreamweaverのCCと複数のブラウザを使用しており、結果は同じです。

HTML

<div class="requirements-bulletdetail hide-desktop-wide show-desktop hide-tablet hide-phone" id="left_SubPanel_Training" 
    style="display:none;"> 
    Each MOT tester must complete a minimum of 3hrs (180 mins) of training as per the cirruculum set down by the DVSA each year. 
    It's important to note that if an MOT tester is dual class (Classes 1 &amp; 2 (GROUP A) AND Classes 3 to 7 GROUP B) then 
    that tester MUST complete a minimum of 3hrs (180 mins) for EACH class group. 
    <a href="#none" class="innerproductlink" onClick="switcherRooLeft('subPanelTraining')" id="SubPanelLink_Training">Learn About Training ...</a> 
</div> 

<!-- DESKTOP WIDE--> 
<div class="requirements-bulletdetail hide-desktop-wide hide-desktop hide-tablet hide-phone" id="left_SubPanel_Training" 
    style="display:none;"> 
    Each MOT tester must complete a minimum of 3hrs (180 mins) of training <br/>as per the cirruculum set down by the DVSA 
    each year. It's important to note that if an MOT tester is dual class (Classes 1 &amp; 2 (GROUP A) AND Classes 3 to 7 
    GROUP B) then that tester MUST complete a minimum of 3hrs (180 mins) for EACH <br/>class group. 
    <a href="#none" class="innerproductlink" onClick="switcherRooLeft('subPanelTraining')" id="SubPanelLink_Training">Learn About Training ...</a> 
</div> 

CSSの問題は、私は両方のセクションでこのコードを持っているにもかかわらずということです

.hide-desktop { 
    display: none; 
} 

.show-desktop { 
    display: inline-block; 
} 

@media (min-width: 960px) and (max-width:1199px) { 
    .hide-desktop-wide { 
     display: none; 
    } 
    .show-desktop-wide { 
     display: inline-block; 
    } 
} 

： -

<a href="#none" class="innerproductlink" onClick="switcherRooLeft('subPanelTraining')" id="SubPanelLink_Training">Learn About Training ...</a> 

それは表示されません任意のブラウザの幅で - そして...私はそのIDを私のJavascriptが参照するものと同じに保つ必要があります。 （と、とにかく、私は正常に動作し、重複するID名を持つページ上の他のコード要素を持っている。

すべてのヘルプ/アイデアは大歓迎。

おかげ

をあなたはあなたが持っているあなたのCSSで !important欠けている

Answer 1

あなたのdisplay: noneがインライン化されているので使用

あなたのCSSは次のようにする必要があります：。

.hide-desktop { 
    display:none !important; 
} 

.show-desktop { 
    display:inline-block !important; 
} 


@media (min-width: 960px) and (max-width:1199px) { 

    .hide-desktop-wide { 
     display:none !important; 
    } 

    .show-desktop-wide { 
     display:inline-block !important; 
    } 

} 

Answer 2

ラット特定の要素を隠して表示するためにメディアクエリを使用するよりも、スタイリングを変更するために使用することをお勧めします。あなたのdiv要素クラスで

違いは次のとおりです。

デフォルト

• 非表示デスクトップ全体
• ショーデスクトップ
• 非表示タブレット非表示電話

デスクトップ

• 非表示デスクトップ全体
• 非表示デスクトップ
• 非表示タブレット
• 非表示電話

あなたはメディアクエリにこれらのスタイルを移動する必要があります。

@media (min-width: 960px) and (max-width:1199px) { 

    //hide desktop-wide, hide-desktop, hide-table, hide-phone styles here 

} 

これにより、複製物が削除されますあなたのHTMLにコードを記述し、CSSだけでスタイリングをコントロールすることができます。

Answer 3

DOH！

解決策が見つかりました！

Stupidtyは私の最高のスキルの一つです！

Answer 4

.hide-desktop-wide { 
    display:none; 
} 

このクラスは両方のdivで使用しています。

<div class="requirements-bulletdetail **hide-desktop-wide** show-desktop hide-tablet hide-phone" id="left_SubPanel_Training" style="display:none;"> 
    Each MOT tester must complete a minimum of 3hrs (180 mins) of training as per the cirruculum set down by the DVSA each year. It's important to note that if an MOT tester is dual class (Classes 1 &amp; 2 (GROUP A) AND Classes 3 to 7 GROUP B) then that tester MUST complete a minimum of 3hrs (180 mins) for EACH class group. <a href="#none" class="innerproductlink" onClick="switcherRooLeft('subPanelTraining')" id="SubPanelLink_Training">Learn About Training ...</a> 
</div> 

<!-- DESKTOP WIDE--> 
<div class="requirements-bulletdetail **hide-desktop-wide** hide-desktop hide-tablet hide-phone" id="left_SubPanel_Training" style="display:none;"> 
    Each MOT tester must complete a minimum of 3hrs (180 mins) of training <br/>as per the cirruculum set down by the DVSA each year. It's important to note that if an MOT tester is dual class (Classes 1 &amp; 2 (GROUP A) AND Classes 3 to 7 GROUP B) then that tester MUST complete a minimum of 3hrs (180 mins) for EACH <br/>class group. <a href="#none" class="innerproductlink" onClick="switcherRooLeft('subPanelTraining')" id="SubPanelLink_Training">Learn About Training ...</a> 
</div>