モバイルサイトで画像を隠す？

iPhoneで#right画像を隠すことができないようです。私はそれを私のウェブブラウザに表示したいが、小さな携帯電話には表示しない。モバイルサイトで画像を隠す？

編集私は、私はクラス名で

感謝を隠して試してみたdisplay: none を試してみたscreen and を試してみたvisibility: hidden !important; を試してみました！

<html> 
<head> 
    <meta content="text/html; charset=ISO-8859-1" 
    http-equiv="content-type"> 
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 
</head> 
<style> 
    html { 
    width: 470px; 
    height: 725px; 
    } 
    div { 
    position: absolute; 
    left: 150px; 
    top: 75px; 
    width: 70%; 
    } 
    #left { 
    width: 300px; 
    height: 700px; 

    } 
    #right { 
    position: absolute; 
    width: 300px; 
    height: 700px; 
    right: 10px; 
    z-index: -1; 
    } 
    #title { 
    position: absolute; 
    top: 10px; 
    left: 31%; 
    width: 330px; 
    height: 90px; 

    } 
    #rightP { 
     position: absolute; 
    width: 75%; 
    left:30px; 
    } 
    #cross { 
     position: absolute; 
     top: 610px; 
     left: 48%; 

     width: 30px; 
     height: 30px; 
    } 
@media screen and (max-width: 600px) { 
    #right{ 
    display: none !important; 
    visibility: hidden !important; 
    } 
    .mobile-hide { 
    display: none; 
    visibility: hidden; 
    } 

} 

    body { 
     min-width: 300px; 

    background-color: #f1e2c1; 
    } 
</style> 
<body link="#000000" vlink="#808080" alink="#FF0000"> 
    <img id="title" src="images/title.jpg"> 
    <img id="left" src="images/left.jpg"> 
    <img class="mobile-hide" id="right" src="images/right.jpg"> 
    <div> 
     <p > 


    </p> 
    </div> 
    <img id="cross" src="images/cross.jpg"> 

</body> 
</html>

出典

2017-07-01 Richard Garfield

これは 'display：none'で、' display：hidden'ではありません。 –

今後の参考として、問題に関連するビットだけにコードを絞り込む必要があります。これは、StackOverflowがあなたにコンテキストについて語った理由です。あなたの質問を編集して不要なものをすべて削除し、実際にはイメージを隠すことになっているビットだけを残しました。 –

私はディスプレイを試した：まだ何もしていない仕事。私はそれのいくつかが関連していると確信しているので、私はすべての文脈を取り戻す。この問題は非常に奇妙です... –

、あなたのメディアクエリ上記の行があります。

//small screen sizes

//をCSSのコメントに使用されるものではない（しかし、唯一のPHPとJSで）！実際には、これはあなたのコードを混乱させます。なぜなら、ブラウザはそれが何らかのCSSだと思っており、それを（そしてそれに続く他のすべてのコードも）扱うことができないからです。

だから

/*small screen sizes*/

にその行を変更し、それが動作します。

出典

2017-07-01 17:09:49 Johannes

うーん、あなたの変更を加えました。あなたはこのサイトにアクセスしたときに言っていますか：あなたの携帯電話では、左の画像だけが表示されます：https://mtgparley.github.io./私のために、私は左右の画像を見る... –

私はそれがこのような何かばかだと分かっていた。ありがとう！ –

私は強くあなたがする必要があるすべては、視認性

で表示を切り替えるれるCSSを使用しているクラスは、この例の特異性のレベル、なしに必要なすべての作業を行う傾向があるとして、idを使用しないことをお勧めします

@media screen and (max-width: 600px) { 
    #right { 
     visibility: hidden !important; 
    } 
    }

希望これは役に立ちます！

出典

2017-07-01 16:48:13

ありがとうございました。私はあなたの変更で私の質問を更新しましたが、それはまだ働いていない... –

その特定の要素のためのメディアクエリを追加、またはmobHideというクラスを作成し、次の

要素

@media screen and (max-width: 767px) { 
    #right { 
     display: none !important; 
    } 
    }

クラス固有のようなものを作成する - あなたは携帯電話上で削除したいものに.mobHideクラスを適用します。デバイス。あなたのウェブサイト上でのスタイルシートのコードでは

@media screen and (max-width: 767px) { 
    .mobHide{ 
     display: none !important; 
    } 
    }

出典

2017-07-01 16:55:54

ありがとう。私は質問で自分のコードを更新しましたが、まだ運がありません –

モバイルサイトで画像を隠す？

答えて

関連する問題