Первый пост здесь:
Написание собственного кода для сайта WordPress. PHP и CSS работают нормально (обе являются пользовательскими страницами, созданными с нуля, но должным образом «подключенными» к WordPress и хорошо отрисовываемыми.) Время начинать кодирование для различных размеров с помощью Media Queries. Но сначала проверка — я не могу заставить работать. Я поместил медиазапросы во все готовые рабочие таблицы стилей. Вещи, проверенные / подтвержденные, не являются проблемой:
• У меня есть код «viewport» в голове (файл header.php WordPress)
• Мой медиа-запрос ПОСЛЕ «CSS-кода по умолчанию» (см. Ниже)
• Пробовал минимальную ширину вместе со средней шириной устройства вместе с экраном @media only и экраном @media — не работают (и не работают его различные комбинации)
• Тройно проверенные орфографические и синтаксические ошибки
• Попытка размещения пространства вокруг двоеточия (минимальная ширина: 1200 пикселей) против (минимальная ширина: 1200 пикселей) — ничего
• Существующие медиазапросы в других частях сайта прекрасно отображаются в браузере (т. Е. Header.php, style.css и т. Д.), Но мой код полностью пользовательский, с использованием уникальных селекторов, поэтому не должен конфликтовать — просто говорю » это не браузер
• Проведены исследования на этом сайте, и Google отвечает, но, похоже, ничего не работает (я знаю о проблемах области просмотра и ширины устройства, как указано выше). Эти «обычные подозреваемые», похоже, не являются проблемой.
Так.
Что я пропускаю / делаю неправильно?
.formtitle {
font-size: 2.5em;
color: #000;
font-weight: bold;
text-align: center;
margin-bottom: .5%;
}
@media only screen and (min-width: 1200px) and (max-width: 1599px) {
.formtitle {
font-size: 2.5em;
color: #f24950;
font-weight: bold;
text-align: center;
margin-bottom: .5%;
}
}
<div class="smallform">
<span class="formtitle">Contact Us Today!</span> [contact-form-7 id="12016" title="DitL Form"]
</div>
Я нашел ваш вопрос в результатах поиска, и у меня возникла та же проблема.
Кажется, WordPress не нравится, как Bootstrap пишет свои медиазапросы с разделами комментариев. Увидеть ниже.
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
Должно быть:
/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) { ... }
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { ... }
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { ... }
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { ... }
Я предполагаю, что вы уже исправили проблему, но я думаю, что это полезно для тех, кто ищет ответ 🙂
Других решений пока нет …