Как мы уже говорили в самом начале, при создании темы надо иметь в виду, что сайт будет должен будет отображаться на множестве мобильных устройств. Вы должны быть уверены, что включили стили для разных размеров экрана, используя media. Стили в этом параметре становятся активны или выключаются в зависимости от ширины экрана. Кто-то добавляет их в начало или конец style.css, кто-то же предпочитает задавать эти стили сразу после описания основного элемента.

Мы предпочитаем размещать стили для мобильных сразу под стилем элемента, это позволяет легко соориентироваться в основном файле стилей.

Для начала нужно задать минимальную ширину, при которой сайт отображается в оригинале, не задействую никакие дополнительные стили. В нашем дизайн проекте минимальная “комфортная” ширина составляет 800px. Чтобы обозначить это, вернемся в content-sidebar.css, и добавим в самом конце файла следующий код:

@media (max-width: 800px) {
.site-content .widget-area {
width: 100%;
float: none;
margin-top: 8%;
background: #ecf1f7;
padding: 5%;
}
}

Обновив страницу и уменьшив ширину окна браузера менее 800px, вы увидите, что сайдбар переместился вниз. Теперь основной контент отображается во всю ширину.

Используя данный принцип вы сможете задать стили для определенных элементов сайта, которые по вашему мнению и из соображений юзабилити должны на дисплеях мобильных устройств выглядеть по-другому. Теперь наша тема адаптирована под мобильные устройства, но это еще не все. По мере добавления новых элементов в шаблон, мы будем редактировать их мобильное отображение при необходимости.