Медиа-запросы не работают в WordPress

Первый пост здесь:

Написание собственного кода для сайта 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>

0

Решение

Я нашел ваш вопрос в результатах поиска, и у меня возникла та же проблема.

Кажется, 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) { ... }

Я предполагаю, что вы уже исправили проблему, но я думаю, что это полезно для тех, кто ищет ответ 🙂

-1

Другие решения

Других решений пока нет …

По вопросам рекламы [email protected]