Добрый день, пишу мои стили в user.css до ширины 1241px стиль эти стили работает. Как только экран сужается меньше 1241px то их как будто топором отрубает. Что я делаю не так?
P.S. Вот допустим я выбрал тему оформления "Черная". Но тогда все активные элементы, например "кнопки" тоже черные, а я хочу чтобы они были красные. Мне же не надо писать стили в конце файла buttons-black.css ? Вот я пишу их в приложении "Сайт" в редакторе дизайна в файле user.css. Обычно этот файл стилей "перебивает" все другие, и вроде смотрю в девелопере он тоже в самом низу head.
Но как только доходит до 1241 этот стиль хоть и есть но браузеры его словно перестают видеть. Что это?
Здравствуйте!
1. Дайте ссылку на странице где такое происходить.
2. Продублируйте сюда код, который вы вставляете для изменение цвета кнопок.
Добрый день, вот например тут на главной странице:
https://new.veer-mar.com/
Сейчас я был вынужден внести правки в сам файл в buttons-black.css
Но лучше всего это заметно по секции со статьями блога. "Полезные статьи", в верстке блоков последней статьи я использовал flex и медия-стили. Но как я писал выше они работают только до указанной выше ширины.
Кстати при сужении окна браузера на этой ширине мелькает красный фон поверх сайта.
Ну тут всё просто. Значит не так указан стиль. Добавьте конкретную строчку в user.css, которая не работает и я скажу вам, почему именно она не работает. Не забывайте о системе приоритетов стилей. Например:
a{color:red} a{color:black}В этой случае приоритет будет иметь второе правило. Тут работает приоритет последовательности. Но если будет так:
body a{color:red} a{color:black}То работать будет уже первое правило, т.к. оно дает больше уточнений.
Так я смотрю в редакторе в браузере, оно вообще исчезает.
Вот в секции со статьями блога.
Для этого контейнера:
<div class="home__news__flexed"></div>
В файле user.css указан стиль:
.home-news__news-item .home-news__content .home__news__flexed {
display: flex;
}
Но ширина меньше чем 1241px и посмотрите в редакторе там дело не в приоритетах, файл user.css вообще не работает. Его просто нет. Обычно если какие-то стили перебивают юзерские находятся выше, а юзерские ниже и "зачеркнуты". Тут все понятно. Но я про то, что ниже ширины 1241px файл стилей user.css просто перестает быть подключен. Тут даже директива !important не поможет.
А вас не смущает обертка
@media (min-width: 1242px) { ... }для вашего правила?
Синтаксическая ошибка. Да, извиняюсь. Теперь ясно что все правила что ниже обрезались.
Смотрите какая штука, я могу писать свои стили в любом другом файле темы InCart который стоит ниже всех и имеет высший приоритет. Все равно при обновлении я обращаю внимание на комментарии где я вносил правки. Просто когда я смотрю в браузере в "инструментах разработчика" я вижу что user.сss действительно вроде как расположен в <HEAD> ниже других стилей. Но как я писал выше. В какой-то момент когда ширина окна браузера (а это уже планшеты или смартфоны) становится меньше 1241px происходит странная вещь. Файл user.css все еще подключен в <HEAD> но стили из него уже не подгружаются на страницу. Тем более речь сейчас идет о блоке который я сверстал на уникальных селекторах. Для них просто нет других стилей кроме моих, которые и прописаны в user.сss.