Поддержка Проблемы и решения Уменьшить горизонтальные разрывы (storefront)

  • basseyn-57412-324x324

    Где и какие внести изменения в код чтобы уменьшыть разрыв к минимуму что показан на фото?
    А также если возможно уменьшить етот же разрыв у футера?

    Большое спасибо за советы.

    Страница, с которой нужна помощь: [войдите, чтобы увидеть ссылку]

Просмотр 9 ответов — с 1 по 9 (всего 9)
  • Где

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

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

    Например так

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

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

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

    Спасибо большое, работает, но только на главной странице.
    Если зайти в корзину или на любую другую страницу, разрыв делается снова очень велик.
    Как изменить разрыв на всех страницах??

    • Ответ изменён 8 месяцев, 2 недели назад пользователем yuraok.
    • Ответ изменён 8 месяцев, 2 недели назад пользователем yuraok.

    yuraok,

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

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

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

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

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

    m0ze
    Спасибо большое.

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

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

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

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

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

    m0ze

    Можете попроавить это так:
    .home .site-header {
    margin-bottom: 20px !important;
    }

    Спасибо большое, такие люди как Вы заставляют верить в человечество ))

    Извените за наглость, может подскажете как мне самому ориентироватся в редактировании стилей wordpress.

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

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

    Не обижусь если не ответите..

    • Ответ изменён 8 месяцев, 1 неделя назад пользователем yuraok.

    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 — это номер строки.

    m0ze (@m0ze)
    Спасибо большое за ответ.

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

    .(index):319
    Когда видите такое, это значит, что стили или скрипт добавлены прямо в тело страницы

    Строка 319 понятно, а как узнать где эта страница?
    Зашел обсмотрел все страницы index.php и не нашел нужного кода.

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

    • Ответ изменён 8 месяцев, 1 неделя назад пользователем yuraok.
    • Ответ изменён 8 месяцев, 1 неделя назад пользователем yuraok.
    • Ответ изменён 8 месяцев, 1 неделя назад пользователем yuraok.
    • Ответ изменён 8 месяцев, 1 неделя назад пользователем yuraok.

    yuraok,

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

    Нет.

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

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

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

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

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

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

Просмотр 9 ответов — с 1 по 9 (всего 9)
  • Тема «Уменьшить горизонтальные разрывы (storefront)» закрыта для новых ответов.