Уменьшить горизонтальные разрывы (storefront)

Где

В style.css дочерней темы или в внешний вид — настройка — дополнительные стили

и какие внести изменения в код

Например так

.site-header {
    margin-bottom: 20px !important;
}

уменьшить етот же разрыв у футера?

.content-area, .widget-area {
    margin-bottom: 0;
}

yuraok,

Спасибо большое, работает, но только на главной странице.

На самом деле, работает на всех страницах, просто у вас на некоторых внутренних страницах есть «хлебные крошки» со своими отступами. Должен сработать такой вариант:

.storefront-breadcrumb {
	padding: 1.41575em 0;
	margin: 0;
}

Если так стили не перекроются, то добавьте !important:

.storefront-breadcrumb {
	padding: 1.41575em 0 !important;
	margin: 0 !important;
}

yuraok, на здоровье 🙂

У вас, кстати, из-за

.site-header {
    margin-bottom: 20px !important;
}

появился другой отступ на внутренних страницах. Можете попроавить это так:

.home .site-header {
    margin-bottom: 20px !important;
}

yuraok, без проблем, рад помочь 🙂

Интересует как находить нужный елемент в общей структуре сайта, как Вы находите нужные элементы, например как узнали что .site-header отвечает за этот отступ?

Вы уже знаете, что во всех современных браузерах есть инструменты разработчика (CTRL + SHIFT + I или F12). Самая первая вкладка отображает структуру текущей страницы и стили всех задействованных элементов, справа будет колонка со стилями и некоторыми опциями. Также попасть в инструменты разработчика можно по клику правой кнопкой мыши по нужному элементу на сайте, выбрав в контекстном меню пункт «Исследовать/Inspect». Там вы попадёте на нужный элемент (если он не перекрыт другим) и увидите его стили, причём те же padding’и и margin’ы визуально подсвечиваются для большего понимания (зелёным — padding, оранжевым — margin).

Потратьте 30-60 минут на изучение этого гибкого инструмента, лишним точно не будет 🙂

—-

И еще как найти нужный элемент через F12 если не пишет имя файла стилей, а пишет например такое .(index):319

Когда видите такое, это значит, что стили или скрипт добавлены прямо в тело страницы через <style>...</style> / <script>...</script>, а не берутся из отдельного файла CSS / JS. Так частично делает и сам WordPress, и плагины/темы. После двоеточия значение, к примеру, 319 — это номер строки.

yuraok,

А структуру PHP инструментами разработчика никак не увидишь, я так понимаю?

Нет.

Как тогда понять откуда растут ноги у элемента если он в файлах php?
Есть простой путь для общего понимания?

В WordPress довольно удобно темы разбиты на «куски», которые содержат в себе те или иные блоки/элементы и пр.: header.php, sidebar.php, footer.php, 404.php etc. То есть в самом названии файла уже есть «подсказка» какой код будет внутри, ну и сам код внутри можно довольно легко читать по классам, <div>'ам и структуре в целом. Опять же, возьмите пару тем и посомтрите файлы и код внутри них, в целом картинка прояснится.

Строка 319 понятно, а как узнать где эта страница?

Это всегда текущая страница. И нужно эту строчку смотреть именно в инструментах разработчика, а не в файлах.

Извените за настойчивость. И спасибо за бесплатный урок, очень признателен!

От незнания до знания один шаг 🙂