@media screenスマートフォンでCSSルールが機能しない

Question

私のホームページの特定のセクションをスマートフォンデバイスでのみ隠そうとしています。

私は以下のコードを使用していますが、まだ携帯電話に表示されています。何かアドバイス？個人的な経験から

@media screen and (max-width: 640px) { 

     #statistics .row { 
      visibility: hidden; 
      display: flex; 
      justify-content: center; 
     } 

     #statistics .row .columns { 
      visibility: hidden; 
      width: auto; 
      margin-top: 3em; 
      background: #fff; 
      color: #444; 
      text-align: center; 
      font-size: 85%; 
     } 

     #statistics .timer.count-title.count-number { 
      visibility: hidden; 
      color: #c22362; 
      font-size: 35px; 
      margin-bottom: 8% 
     } 

     #statistics .fa { 
      visibility: hidden; 
      color: #c22362; 
     } 
    } 

Answer 1

あなたはメディアクエリを経由して、何かを隠すために欠けている場合は、visibility: hidden;を使用することは良いアイデアではありません。それを指定するのではなく、次のように置き換えます。display: none;

可視性：非表示;モバイルデバイス上で見た場合にあなたのウェブサイトにギャップを残すコンテンツを隠すだけです - display：none;ただし、その特定のクラスまたはid期間が優先されず、ギャップはありません。

また、キャッシュをクリアすることをお勧めします。これも、変更が反映されていないことが原因です。