По умолчанию как спрятать сайдбар в мобильной версии?

Question

biper111 @biper111

По умолчанию как спрятать сайдбар в мобильной версии?

Делаю сайт портфолио petrovich-design.ru/portfolio/. использую шаблон Brushed. На странице слева есть блок sidebar, хочу, чтобы в мобильной и печатной версии сайта он не показывался. Вроде как за отображение в мобильной версии отвечает responsive.css, т.е. я там прописываю (условно, стр. 210) для media (min-width: 480px) следующее условие - #sidebar .hide-on-mobile {display: none !important;}
А блоку прописываю
Но чуда не происходит… что делаю не так ? Помогите разобраться… 

Вопрос задан более трёх лет назад
766 просмотров

14 комментариев

Подписаться Простой 14 комментариев

Евгений Вольф @Wolfnsex Куратор тега CSS

Подключите свой CSS-файл самым последним и допишите туда нужные стили. Таким образом, Вы как минимум отделите ~~мух от котлет~~ свой код, от "чужого" и не будете испытывать потенциальных проблем, например, при обновлении темы. Ну и мы тогда сможем полноценно понять, в чем именно проблема.

Написано более трёх лет назад
Ankhena @Ankhena Куратор тега CSS

biper111
@media (min-width: 480px)

Если хотите что-то спрятать на мобильниках, то логичнее ограничивать максимальную ширину, а не минимальную. Да и вьюпорт мобильника в портретной ориентации меньше 480 точек.

Открываете инспектор кода (например, в хроме), устанавливаете ширину окна, выделяете нужный блок и смотрите какие стили применились, а какие нет и кто их перебил.

Написано более трёх лет назад
biper111 @biper111 Автор вопроса

Ankhena, Евгений Вольф, ок, создал отдельный CSS содержащий

media (max-width: 600px) {
#sidebar {
visibility: hidden;
display: none!important;}
}

подключил его последним
Вижу через инспектор кода, что условие игнорируется, как понимаю, - user agent stylesheet.... как с таким бороться ?

Написано более трёх лет назад
Ankhena @Ankhena Куратор тега CSS

biper111, так не бывает
Дайте ссылку или выложите код в песочницу

Написано более трёх лет назад
biper111 @biper111 Автор вопроса

Ankhena, так я первым делом дал ссылку, в самом начале.. petrovich-design.ru/portfolio

Написано более трёх лет назад
Евгений Вольф @Wolfnsex Куратор тега CSS

biper111, у меня на разрешении 600 и ниже - #sidebar исчезает (display: none). У Вас не так?

Написано более трёх лет назад
biper111 @biper111 Автор вопроса

Евгений Вольф, нет... пробовал и в анонимном режиме и кеш сбрасывал и историю... сайдбар есть, он только выравнивается по ширине страницы и встает сверху это видно если посмотреть код.. начиная с раздела "Разделы портфолио" и заканчивая иконкой Live Internet все это как раз сайдбар... он видоизменяется, как прописано в шаблоне Brushed, который я использую..но исчезнуть совсем я его заставить не могу, как ни странно...

Написано более трёх лет назад
Евгений Вольф @Wolfnsex Куратор тега CSS

biper111, смотрите, у меня при разрешении 600 (и ниже) выглядит всё вот так:

То есть, применяется тот стиль, который Вы указали к указанному слою. У Вас не так?

Написано более трёх лет назад
biper111 @biper111 Автор вопроса

странно.. буду смотреть в другом браузере... вроде как все так и нать.. видимо проблема не в коде :)))) Спасибо !

Написано более трёх лет назад
Ankhena @Ankhena Куратор тега CSS

biper111, да, у вас все стили срабатывают.
От 600 до 768 он становится горизонтальным.
А меньше 600 исчезает.
Все, как на скрине Евгения Евгений Вольф

Еще поправьте работу верхней панели на < ~ 1270 она находится в странном положении

Написано более трёх лет назад
biper111 @biper111 Автор вопроса

так и есть... в опере, Сафари, firefox, Хроме все чинно... и только яндексбраузер, несмотря на сбросы кеша с сайта и с браузера упорно показывает несуществующий сайдбар.. :)))

Написано более трёх лет назад
biper111 @biper111 Автор вопроса

Спасибо за помощь :)

Написано более трёх лет назад
Ankhena @Ankhena Куратор тега CSS

biper111, Масштаб проверьте

Написано более трёх лет назад
biper111 @biper111 Автор вопроса

Да, спасибо.. с текучкой разберусь и уже подчищу все.. :)

Написано более трёх лет назад

Пригласить эксперта

Ответы на вопрос 1

Комментировать

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

CSS

Простой
Как выровнять по высоте заголовки в карточках товаров?
- 1 подписчик
- 3 часа назад
- 49 просмотров
3

ответа
HTML

+1 ещё

Средний
Как в файле svg заставить работать события?
- 2 подписчика
- 7 часов назад
- 91 просмотр
1

ответ
CSS

Средний
Почему у элемента такое поведение?
- 3 подписчика
- 17 часов назад
- 1267 просмотров
0

ответов
CSS

Простой
Почему не работает transition свойство в scss файле через webpack?
- 1 подписчик
- 20 часов назад
- 56 просмотров
2

ответа
HTML

+1 ещё

Простой
Почему верхние и нижние внешние отступы пустого блока не схлопываются?
- 2 подписчика
- 23 часа назад
- 193 просмотра
4

ответа
CSS

Простой
Почему нет задержки между повторами анимации?
- 1 подписчик
- вчера
- 57 просмотров
1

ответ
HTML

+1 ещё

Простой
Почему пустой div смещается, если ему задать margin-bottom?
- 2 подписчика
- вчера
- 176 просмотров
1

ответ
CSS

Простой
Почему не сужается flex-элемент с flex-shrink: 1?
- 1 подписчик
- вчера
- 77 просмотров
0

ответов
CSS

+1 ещё

Средний
При сборке webpack картинки из css не открываются?
- 1 подписчик
- вчера
- 86 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как сделать появление баннера от определенной высоты?
- 3 подписчика
- вчера
- 577 просмотров
1

ответ
Показать ещё Загружается…

Тестировщик-стажёр

ITooLabs • Тула

от 35 000 до 40 000 ₽

Fullstack PHP Developer

Smapse Education

от 40 000 до 65 000 ₽

Trainee - IT Support

move2usajobs.com LLC • Лос-Анджелес

от 2 000 до 4 000 $

Разместить объявления на Авито

23 апр. 2024, в 17:47

10000 руб./за проект

Осуществлять оптовые продажи товаров для дома

23 апр. 2024, в 17:43

30000 руб./за проект

Разработать видеочатбота с ответами на вопросы абитуриентов

23 апр. 2024, в 17:07

6500 руб./за проект

Подключите свой CSS-файл самым последним и допишите туда нужные стили. Таким образом, Вы как минимум отделите ~~мух от котлет~~ свой код, от "чужого" и не будете испытывать потенциальных проблем, например, при обновлении темы. Ну и мы тогда сможем полноценно понять, в чем именно проблема.
biper111
@media (min-width: 480px)

Если хотите что-то спрятать на мобильниках, то логичнее ограничивать максимальную ширину, а не минимальную. Да и вьюпорт мобильника в портретной ориентации меньше 480 точек.

Открываете инспектор кода (например, в хроме), устанавливаете ширину окна, выделяете нужный блок и смотрите какие стили применились, а какие нет и кто их перебил.
Ankhena, Евгений Вольф, ок, создал отдельный CSS содержащий

media (max-width: 600px) {
#sidebar {
visibility: hidden;
display: none!important;}
}

подключил его последним
Вижу через инспектор кода, что условие игнорируется, как понимаю, - user agent stylesheet.... как с таким бороться ?
biper111, так не бывает
Дайте ссылку или выложите код в песочницу
Ankhena, так я первым делом дал ссылку, в самом начале.. petrovich-design.ru/portfolio
biper111, у меня на разрешении 600 и ниже - #sidebar исчезает (display: none). У Вас не так?
Евгений Вольф, нет... пробовал и в анонимном режиме и кеш сбрасывал и историю... сайдбар есть, он только выравнивается по ширине страницы и встает сверху это видно если посмотреть код.. начиная с раздела "Разделы портфолио" и заканчивая иконкой Live Internet все это как раз сайдбар... он видоизменяется, как прописано в шаблоне Brushed, который я использую..но исчезнуть совсем я его заставить не могу, как ни странно...
biper111, смотрите, у меня при разрешении 600 (и ниже) выглядит всё вот так:

То есть, применяется тот стиль, который Вы указали к указанному слою. У Вас не так?
странно.. буду смотреть в другом браузере... вроде как все так и нать.. видимо проблема не в коде :)))) Спасибо !
biper111, да, у вас все стили срабатывают.
От 600 до 768 он становится горизонтальным.
А меньше 600 исчезает.
Все, как на скрине Евгения Евгений Вольф

Еще поправьте работу верхней панели на < ~ 1270 она находится в странном положении
так и есть... в опере, Сафари, firefox, Хроме все чинно... и только яндексбраузер, несмотря на сбросы кеша с сайта и с браузера упорно показывает несуществующий сайдбар.. :)))
Да, спасибо.. с текучкой разберусь и уже подчищу все.. :)

Answer 1 · 2017-11-19 18:48:26

а вы там чисто css-ом работаете?
Судя по верстке, нужно скрывать не сайдбар, а родителя, который "class="span3".
Обратите внимание на строчку кода:

<div class="span3" .hide-on-mobile="" display:="" none;="">

тут явно какой-то треш.

Зачем вы прописываете #sidebar .hide-on-mobile, если в потомках #sidebar вообще такого класса? Просто #sidebar {display: none !important;}

По умолчанию как спрятать сайдбар в мобильной версии?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт