Как сделать так, чтобы боковая панель WP реагировала и отображалась внизу страницы на маленьких экранах? - PullRequest
Новая
       37

Как сделать так, чтобы боковая панель WP реагировала и отображалась внизу страницы на маленьких экранах?

0 голосов
/ 25 марта 2019

Я нашел следующий код CSS, который вставил в таблицу стилей css дочерней темы, но он не работает. 

/* Mobiles in Potrait mode */
@media only screen 
and (max-width : 320px) {
    .widget-area {
        float: left;
        width: 100%;
        background: #E3E3E3;
    }
}

/* Mobiles in landscape mode */
@media only screen 
and (min-width : 321px) 
and (max-width : 480px) {
    .widget-area {
            float: left;
            width: 100%;
            background: #E3E3E3;
    }
}

Вы можете проверить мой WP-сайт

Ответы [ 2 ]

0 голосов
/ 25 марта 2019

Добавьте эти коды в этот файл: /wp-content/themes/storefront-child-theme-master/style.css

@media (max-width: 66.4989378333em){
.col-full {
    margin-left: 2.617924em;
    margin-right: 2.617924em;
    padding: 0;
    display: flex;
    flex-direction: column;
}
}

@media (max-width: 66.4989378333em){
.right-sidebar .widget-area {
    width: 100%
}
}

@media (max-width: 66.4989378333em){
.right-sidebar .content-area {
    width: 100%
}
}
0 голосов
/ 25 марта 2019

.widget-area по умолчанию содержится в .sidebar-container, поэтому вы указали неверный класс.

Вы можете прочитать подробнее WP-новички и WP-кодекс

Обновление:

На основе HTML вашего сайта вам понадобится: 

.right-sidebar .content-area {
    width: 100%;
    float: left;
    margin-right: 5%;
}

.right-sidebar .widget-area {
    float: left;
    width: 100%;
    background: #E3E3E3;
}

Добавленные вами стили были перезаписаны body классом .right-sidebar

Спасибо.

...