html - CSS display block and hide another on low resolution -


i'm trying hide navigation bar , display thing in place when resolution low , small screens (mobile)

i did manage hide navigation bar the other thing won't display.

@media screen , (max-device-width: 500px) {         .small-menu {         display: block;         }          .regular-menu {         display: none;         }       }   @media screen , (max-width: 1279px) {          .small-menu {         display: block;         }          .regular-menu {         display: none;         }  }       .small-menu {         display: none;     }      .regular-menu {         display: block;     } 

write css seqvence

  1. write hole page css
  2. write css max-width 1279
  3. write css max-device-width 500

      .small-menu {              display: none;          }            .regular-menu {              display: block;          }          @media screen , (max-width: 1279px) {                .small-menu {              display: block;              }                .regular-menu {              display: none;              }        }          @media screen , (max-device-width: 500px) {              .small-menu {              display: block;              }                .regular-menu {              display: none;              }              }              
<div class="samll-menu">this small menu</div>  <div class="regular-menu">this regular-menu</div>


Comments

Popular posts from this blog

how to insert data php javascript mysql with multiple array session 2 -

multithreading - Exception in Application constructor -

windows - CertCreateCertificateContext returns CRYPT_E_ASN1_BADTAG / 8009310b -