Медиа-запросы не заменяют собственные стили?

Мне интересно, почему некоторые из моих медиа-запросов не отменяют собственные стили в вызываемом ими порте просмотра. Я пытаюсь адаптировать стиль меню к стеку и увеличить высоту области навигации в теме WP. Но в любом случае я добавляю спецификации, которые создаю, чтобы получить этот эффект, редактируя Live CSS в Safari или проверяя элемент FF - стили, которые я вставляю в конкретное окно просмотра, на которое я нацелен, не читаются. Я знаю, что правильно использую медиа-запросы, так как он читает НОВЫЕ стили, просто не отменяет родные? Я что-то здесь упускаю? Вот то, что я пытаюсь добавить, но не читается.

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {

#access li {
    float: none; // To translate to not to float to the left stack
    position: relative;
}

#access {
    background: url("http://testsite.com/wp-content/uploads/2012/01/menu_bg.gif") repeat scroll 0 0 transparent;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    clear: both;
    display: block;
    float: left;
    height: 240px; //Changed the height to allow stack
    width: 100%;
}

Редактировать: Вот ПОЛНЫЙ набор Адаптивных стилей, который я вызываю, если имеет значение.

  /* =Responsive Structure
----------------------------------------------- */

@media (max-width: 800px) {
    body {
        padding: 0;
    }
    #page {
        margin-top: 0; overflow: hidden;
    }
    #branding {
        border-top: none;
    }
        #signup { display:none; }
        #adbox { display:none; }
        #adbox2 { display:none; }
        #socialpost { margin-left: -100px; }
        p {font-size: 12px; }
        #sublogo { display: none; }
        #footcontain {  padding-left: 0;}

        #access a {
        color: #000000;
        display: block;
        font-family: arial;
        line-height: 3.11em;
        padding: 0 20px;
        text-decoration: none;
        #access a { font-size: 12px; }

        #access li {
        float: left;
        margin-left: -28px;
        position: relative; }
}

@media (max-width: 650px) {
    /* @media (max-width: 650px) Reduce font-sizes for better readability on smaller devices */
    body {
        padding: 0;
    }
    #page {
        margin-top: 0;
    }
    #branding {
        border-top: none;
    }
        #signup { display:none; }
        #adbox { display:none; }
        #adbox2 { display:none; }
        p {font-size: 12px; }
        #sublogo { display: none; }

        #access a {
         color: #000000;
         display: block;
         font-family: arial;
         line-height: 3.11em;
         padding: 0 13px;
         text-decoration: none;
         font-size: 11px;}
         #footcontain {  padding-left: 0;}
         #access a {
         padding: 0 15px; }

}

@media (max-width: 450px) {
        #content .gallery-columns-2 .gallery-item {
    width: 45%;
    padding-right: 4%;
    }
    #content .gallery-columns-2 .gallery-item img {
        width: 100%;
        height: auto;
    }
        #signup { display:none; }
        #adbox { display:none; }
        #adbox2 { display:none; }
        p {font-size: 10px; }

       .entry-content, .entry-summary {
        padding: 1.625em 0 0;
        width: 48%; }
        #footcontain {  padding-left: 0;}

        #branding #s {
       -moz-transition-duration: 400ms;
       -moz-transition-property: width, background;
       -moz-transition-timing-function: ease;
        float: right;
        height: 35px;
        width: 47px; }

        .widget-title { margin-top: 35px; }

        .flexslider .slides img {
         border: 0 none;
         display: block;
         max-width: 100%;
         padding-bottom: 25px; }
         #footcontain {  display:none;}

         #access li {
         float: none;
         position: relative;
         }

         #access {
         height: 70px;
         }

         #access a {
         color: #000000;
         display: block;
         font-family: arial;
         font-weight: bolder;
         line-height: 3.11em;
         padding: 0 10px;
         text-decoration: none;
         }

         #access ul {
         font-size: 10px;
         list-style: none outside none;
         margin: 0 0 0 -80px;
         padding-left: 0;
         }

        .flex-control-nav { display: none; }
        .flexslider {
         margin: 0 0 67px; }
        .flex-caption {  display: none; } //Could Display this here, need to make take half of slider

}

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    body { padding: 0; }

        #access {
        height: 70px;
        }

    #page {
        margin-top: 0; overflow: hidden;
    }
    #branding {
        border-top: none;
    }
        #signup { display:none; }
        #adbox { display:none; }
        #adbox2 { display:none; }
        p {font-size: 10px; }
        #sublogo { display: none; }
        #access a { padding: 0 10px; }

        #access li {
        float: none;
        position: relative;
        }

       .entry-content, .entry-summary {
        padding: 1.625em 0 0;
        width: 35%; }
        #footcontain {  display: none; }

       #branding #s {
         -moz-transition-duration: 400ms;
         -moz-transition-property: width, background;
         -moz-transition-timing-function: ease;
         float: right;
         height: 35px;
         width: 47px; }

        #footcontain { display: none; }

        .widget-title { margin-top: 35px; } //Attempt to Create Space for Slider Page Nation
        #access { height: 70px; }

        #access li {
        float: none;
        position: relative;
        }

       .flex-control-nav { display: none; }

       .flex-caption {  display: none; } //Could Display this here, need to make take half of slider, check 
       .flexslider {
       margin: 0 0 67px; }

}
7
задан Captain Ron 23 January 2012 в 15:16
поделиться