Наша панель уведомлений не работает на мобильных устройствах, как ожидалось - PullRequest
Новая
       22

Наша панель уведомлений не работает на мобильных устройствах, как ожидалось

0 голосов
/ 26 апреля 2018

У нас есть сайт в WordPress, ниже ссылка для вашей справки. 

https://timesandtrendsacademy.com/

В нижней части каждой страницы нашего веб-сайта есть один foobar в режиме склеивания и прокрутки. Я поставил несколько пользовательских CSS для того же для полного взгляда, ниже для справки, 

.foobar-container-left{display:none;}
.foobar-container-right{display:none;}
#foobar-message-0{width:100%;}

@media only screen and (max-width:500){
#branches{width:100%;}
}

Он отлично работает на настольном компьютере, но когда мы изменяем размеры нашего экрана или когда мы открываем на мобильных устройствах, эта ширина не занимает всю ширину. Он показывает ширину в 150 пикселей, что не очень хорошо выглядит на мобильных устройствах.

мы должны добавить некоторые CSS или медиа-запросы для правильного отображения на всех устройствах.

Пожалуйста, сообщите нам.

Спасибо, Гопал

Ответы [ 2 ]

0 голосов
/ 26 апреля 2018

Добавить эту CSS в редакторе стилей 

@media only screen and (max-width: 767px){
.foobar-container-inner {
    margin-left: 0important;
    width:100%!important;
    margin-top: -40px!important;
}
#foobar-message-0 {
    width:100%!important;
}
}
0 голосов
/ 26 апреля 2018

Это потому, что есть стиль с !important, который перезаписывает ваши стили. 

@media only screen and (max-width: 800px) and (min-width: 320px) {
    #foobar-message-0 {
        margin-top: 10px;
        width: 150px!important;
    }
}

Удалите! Важное, отредактируйте стиль или используйте более конкретный селектор с! Важным.

Пример: 

@media only screen and (max-width: 800px) {
    #foobar-message-0 {
        width: 100%!important;
    }
}

Эти стили должны быть после стилей для перезаписи.

...