Как убрать два класса при разрешении меньше 767 и больше 376?

Question

[Sveklovoz]

Суть -- надо отключить скрытие nav при разрешении более 375 и менее 768; соответственно убрать кнопку с классом при тех же разрешениях.

Сделал это костылями на CSS:

@media (min-device-width: 376px) and (max-device-width: 768px) {
  button.navbar-toggle {
    display: none;
  }
  .collapse {
    display: flex;
  }

Хотелось бы узнать как сделать правильно, где смотреть код и прочее. При display: relative например .collapse все равно не отображается. Спасибо.

P.S. Внизу перезадал вопрос.

Answer 1

[Сергей Горячев]

Так правильно же все в медиа-запросе.

Сделал это костылями на CSS:

Это не костыли вообще-то.
ravesli.com/slovar-programmista-sleng-kotoryj-dolz...
Нужно применять термины там, где оно требуется.
А не просто красивое слово услышал где-то и написал %)))

Костыль – это исправление серьезных багов, дыр, ошибок без должного исправления целой системы. Т.е. когда что-то сломалось, и нужно исправить на скорую руку в кротчайшие сроки.

А в данном случае это правильный медиа-запрос.

как сделать правильно, где смотреть код и прочее

Вообще не понятно, что ты имеешь ввиду, какой код, где смотреть.

display: relative
А что это за херня? Мне не известна данная конструкция %)
Либо position relative, либо display block/none/flex.

Comments

[Егор Живагин]

парень раскрывает секретные наработки css4 ))

[Sveklovoz]

ааа. Путаю свойства position и display.

Answer 2

[Егор Живагин]

Правильно тут всё. Абсолютно.

Кроме display: relative )
Стандартное поведение - block или inline . Ты что-то из этого имел ввиду?

Answer 3

[Sveklovoz]

Попробую пересформулировать ещё раз. Пример: getbootstrap.com/examples/theme

Надеюсь, Вы поймёте почему я считаю это костылём. Прошу простить, если я неправильно апеллирую терминами.

navbar при разрешении менее 768 превращается в менюшку для мобильных и планшетов. Мне надо, чтобы это происходило только для разрешения менее 375 пикселей, включительно. Я написал "костыль" на CSS, но мне надо это найти в бутстрапе и переписать код там. Я не знаю, где это. В JS или CSS.

P.S. Если для ранжировки сайта и правильной мобильной версии лучше довериться бутстрапу, тогда ладно. Но у меня на сайте менюшка в три пункта, на разрешении в более 375 пикселей смотрится адекватно в любом случаи.

Comments

[Ankhena]

1. Когда вы пишете сами себе ответ, о нем никто не узнает. Нужно редактировать вопрос.

2. Не надо ничего переписывать в бутстрапе. Надо переопределять в своем файле.

3.

для ранжировки сайта

Что вы имели в виду под этим словосочетанием?

[Sveklovoz]

1. Хорошо, учту.
2. А почему не надо? Я себе выбрал сборку бутстрапа из тех элементов, что мне надо. Почему её не рекомендуется переопределять конкретно там? Чтобы другие разработчики могли редактировать сайт, но если они не знают что я менял что-то в бутстрапе, то они не будут это знать. Поэтому?
3. Если сайт не оптимизирован под мобильные устройства, то в поиске он имеет более низкие приоритеты, чем аналогичные сайты с мобильной версией.

[Ankhena]

Sveklovoz:
2. Если уверены, что никогда не возникнет потребности обновлять сторонние фреймворки, библиотеки и т.д., то можно и прямо в них править. Но кто же может быть в этом уверен..
Про других разработчиков тоже аргумент.

3. Ранжирование.
Поисковикам без разницы с помощью чего вы делаете адаптивность.

[Андрей Токмаков]

Sveklovoz: Зачем Вам переопределять в самом бутстрапе? Если это можно сделать в файле подгружаемом ниже и не будет ни каких проблем, в том числе с самим бутстрапом