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

Question

[biper111]

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

Comments

[Евгений Вольф]

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

[Ankhena]

biper111

@media (min-width: 480px)

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

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

[biper111]

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

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

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

[Ankhena]

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

[biper111]

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

[Евгений Вольф]

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

[biper111]

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

[Евгений Вольф]

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


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

[biper111]

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

[Ankhena]

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

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

[biper111]

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

[biper111]

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

[Ankhena]

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

[biper111]

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

Answer 1

[Антон]

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

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

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

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