Теперь вы понимаете как важно настроить основные стили элементов, задать шрифты, размер, цвета и т.д. Но как вы смогли заметить этого недостаточно, наш сайт как будто вытянут по вертикали, нет привычного заголовка, сайдбара и футера. Давайте настроим отображение этих базовых элементов.

Для начала мы добавим немного пространства слева и справа, чтобы это сделать в файле header.php сразу под тегом нужно найти строку

и перенести ее расположив перед самой последней строчкой в этом файле, а также добавив в существующий класс слово container, две последние строки файла будут выглядеть так:

Класс container будет универсальным, чтобы использовать его во многих элементах, поэтому сразу пропишем стили для него в style.css:

.container {
max-width: 1360px;
margin: 0 auto;
padding: 0 5%;
display: block;
position: relative;
}

@media (max-width: 600px) {
.container {
padding: 0 15px;
}
}

В Underscores предусмотрен файл стилей для сайдбара, он находится в папке layouts. Здесь есть два файла content-sidebar.css и sidebar-content.css, второй файл нам не пригодиться поэтому его можно удалить. Чтобы подключить стиль нужно опять обратиться к functions.php.

+Content Sidebar video

Теперь, обновив страницу, вы увидите, что сайдбар появился на своем традиционном месте — справа. Но если вы уменьшите ширину окна, вы сможете заметить, что сайдбар всегда занимает 25% от всей ширины и находится справа. Если уменьшить ширину до миинимально возможной, то сайдбар будет выглядеть совсем сжатым:

Для того, чтобы привести его в нормальный вид, мы сделаем его адаптивным.

Назад к содержанию