WordPress blog отзывчивость

Question

Наш company website был построен с WordPress + Forest темы.

Чтобы получить полную ширину блога, мы должны были удалить боковую панель из соответствующих шаблонов и добавить следующий пользовательский CSS:

blog .site-content, .single .site-content { width: 70%; max-width: 70%; margin: auto; } 

Это прекрасно работает на рабочем столе и большинство других устройств и размеров экрана.

Однако на смартфонах дисплей не очень приятный, из-за слишком больших полей с обеих сторон.

Итак, мы попытались реализовать следующий пользовательский CSS, чтобы исправить это, но это не похоже, чтобы изменить отображение на смартфонах:

@media (min-width: 992px) .blog .site-content, .single .site-content { width: 90%; max-width: 90%; margin: auto; } 

Любая идея о том, что здесь не так и как это исправить?

Спасибо.

Answer 1

Если вы хотите, меньшие поля на небольших дисплеях, это должно было быть

@media (max-width: 992px) { 
    .blog .site-content, .single .site-content { 
     width: 90%; max-width: 90%; margin: auto; 
    } 
} 

Answer 2

Вашего @media код отсутствуют некоторые фигурные скобки ({ и }), и вам нужно использовать max-width, не min-width. Обычно я добавляю @media handheld в свой мобильный CSS.

@media (max-width: 992px), 
@media handheld { 
    .blog .site-content, .single .site-content { 
     width: 90%; max-width: 90%; margin: auto; 
    } 
}