CSSで@mediaを使用してdivクラスを非表示にする

画面サイズを小さくしたときに電子メールdivクラスを非表示にしようとしています。CSSで@mediaを使用してdivクラスを非表示にする

これは、一連の列を含むdivクラスに対してこれを行っていますが、ログインしたユーザーの電子メールアドレスを含むdivクラスを非表示にすることはできません。

<div class="cert"> 
    <h1 class="certname"> 
     <?php 
     global $current_user; 
     get_currentuserinfo(); 
     echo 'Hi, <a href="https://vle.uxbridge.ac.uk/intranet/members/' . $current_user->user_login . '/profile/change-avatar/">' . $current_user->display_name . '</a>' . "\n"; 

     ?></h1> 
    <h2 class="certemail"> 
     <?php 
     global $current_user; 
     get_currentuserinfo(); 
     echo '<a href="https://outlook.office.com/owa/" target="_blank">' . $current_user->user_email . '</a>' . "\n"; 

     ?> 
    </h2> 
</div>

とCSS：

@media only screen and (max-width: 300px) { 
.cert { display:none !important; } 
}

出典

2017-04-25 Marty

を試してみてください。スタイルが適用されているかどうかを教えてくれますか？適用されているが、より高い特異度値 – ThisGuyHasTwoThumbs

をいくつかのルールで上書きしている場合もあります。画面幅を300以下にしてから、クロムの反応ツールで確認してください。それは動作するはずです。 – rahulsm

画面サイズが<= 300の場合にスタイルが要素に適用されるかどうかを一度確認します。 – Ananya

あなたのメディアクエリが動作するはずです、300ピクセルは非常に小さなサイズであることに注意してください、それはほとんどのモバイルデバイスよりも小さいです（320PXは、iPhone 4の画面解像度であります）。

画面のサイズが300px以下の場合、メディアクエリで divをdisplay: none !importantに設定します。これは必要な動作ですか？

出典

2017-04-25 11:55:13

電子メールまたは合計divのみを非表示にしますか？あなたは電子メールのみを非表示にする場合は、CSSは次のようになります。あなたは、ブラウザ内の要素を検査した場合

@media only screen and (max-width: 300px) { 
.cert .certemail{ display:none !important; } 
}

出典

2017-04-25 12:21:51 nivas

この

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
body { 
 
    background-color: lightblue; 
 
} 
 

 
@media screen and (min-width: 480px) { 
 
    body { 
 
     background-color: lightgreen; 
 
    } 
 
} 
 
@media screen and (max-width: 300px) { 
 
.cert{ display:none; } 
 
} 
 
} 
 
</style> 
 
</head> 
 
<body> 
 
<div class="cert"> 
 
    <h1 class="certname"> 
 
     <?php 
 
     global $current_user; 
 
     get_currentuserinfo(); 
 
     echo 'Hi, <a href="https://vle.uxbridge.ac.uk/intranet/members/' . $current_user->user_login . '/profile/change-avatar/">' . $current_user->display_name . '</a>' . "\n"; 
 

 
     ?></h1> 
 
    <h2 class="certemail"> 
 
     <?php 
 
     global $current_user; 
 
     get_currentuserinfo(); 
 
     echo '<a href="https://outlook.office.com/owa/" target="_blank">' . $current_user->user_email . '</a>' . "\n"; 
 

 
     ?> 
 
    </h2> 
 
</div> 
 

 
</body> 
 
</html>

出典

2017-04-25 12:53:29

CSSで@mediaを使用してdivクラスを非表示にする

答えて

関連する問題