#css #wordpress
#css #wordpress
Вопрос:
Я использую тему NewsCard, и поскольку я получил бесплатную версию, я использовал дополнительное поле CSS для настройки цветов веб-сайта. (обычно это можно сделать только в pro версии темы) Поскольку я не разработчик, я взял код из учебника, выбрал свои цвета, отредактировал их, и все прошло отлично, за исключением одной вещи. Для мобильных и планшетных версий панель навигации по-прежнему имеет цвет темы по умолчанию. Все остальные изменения цвета в порядке на этих дисплеях, кроме этого.
Может кто-нибудь мне помочь? Я вставлю свой код из дополнительного поля CSS ниже.
@import url('https://fonts.googleapis.com/css2?family=Piazzolla:wght@500amp;display=swap');
* {font-family: 'Piazzolla', serif;}
/*** Top Bar ***/
.info-bar {
background-color: ;
}
.info-bar ul li, .info-bar .social-profiles ul li a, .info-bar .infobar-links ul li a {
color: #fff;
}
/*** Nav Bar BG Color ***/
.navigation-bar {
background-color: #FF5533 !important;
}
/*** Home - Titles ***/
h3.stories-title, .stories-title {
border-left: 4px solid #FF5533;
}
/*** Home - Post Titles ***/
.post-boxed .entry-title, .post-block .entry-title, .post-boxed.main-post.inlined .entry-title {
font-weight: 500;
}
/*** Home - Widget Titles ***/
.widget-title {
border-left: 4px solid #FF5533;
}
/*** Home - Just Img ***/
.post-img-wrap .entry-meta .cat-links a {
background-color: #1e1f1e;
}
/*** Home - Img Title ***/
.post-img-wrap .entry-header .entry-meta .cat-links a {
background-color: #1e1f1e;
}
/*** Home - Cat Text ***/
.entry-meta .cat-links a {
color: #ef3f49;
}
/*** Home - Search Button ***/
.btn-theme {
background-color: #1e1f1e;
}
/*** Single Posts - Body amp; Title ***/
.entry-content p {
line-height: 1.8;
margin-bottom: 15px;
font-family: ;
font-weight:300;
color: #000;
font-size: 1em;
}
.entry-header h1.entry-title {
font-size: 35px;
font-weight: 500;
color: #333333;
margin: 0 0 10px;
font-family: 'Piazzolla', serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: lato;
}
/*** Category Page Post Title***/
.entry-header h2.entry-title {
font-size: 20px;
line-height: 1.3em;
font-weight: 500;
color: #333333; }
/*** Sidebar ***/
.post-boxed.inlined .entry-title, .post-block .entry-title {
line-height: 1.2;
font-weight: 400;
font-size: 17px;
}
.post-col .entry-meta .cat-links a {
font-weight: 400;
font-size: 12px;
}
/*** Mobile Nav Bar ***/
@media (max-width: 767px) {
.navigation-bar {
background-color: #FF5533 ;
}
}
Ответ №1:
попробуйте удалить флаг !important из правила:
/*** Nav Bar BG Color ***/
.navigation-bar {
background-color: #FF5533;
}
в противном случае добавьте флаг также в правило внутри медиа-запроса
/*** Mobile Nav Bar ***/
@media (max-width: 767px) {
.navigation-bar {
background-color: #7799BB !important;
}
}
Комментарии:
1. Ну, я только что заметил, что вы указываете один и тот же цвет в обоих правилах.
2. Обновите цвет фона в панели навигации для мобильных устройств на то, что вы хотите
3. Какой бы цвет я ни ввел, он всегда остается по умолчанию для мобильных устройств и планшетов. Даже когда у меня есть команда !important в обоих местах, ни в одном, ни в одном из них, все время одно и то же. Любой другой цвет можно изменить без проблем.