Поддержка Темы и шаблоны Дочерняя тема «сломала» адаптивность

  • Родительскую тему правил напрямую и адаптивностью было все в порядке. Когда перенёс все настройки в дочернюю тему — адаптивность нарушилась. Могу дать одновременно два сайта с обоими вариантами. Но пока теоретический вопрос — может не надо было копировать все php -файлы в дочернюю тему или еще какая то другая причина? Может перенести настройки для различных размеров экрана в дочерний style.css? Где находятся точки излома?

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

Просмотр 9 ответов — с 1 по 9 (всего 9)
  • может не надо было копировать все php -файлы в дочернюю тему

    Конечно не надо. Это уже будет не дочерняя.
    Копировать нужно только те шаблоны, в которых нужно что-то изменить.

    или еще какая то другая причина?

    То, что Вы имеете ввиду под адаптивностью — это в css. Соответственно там её и сломали.

    Удалю те, в которых ничего не менял. Я перенёс из отредактированной родительской темы все изменения в style.css в дочернюю. Но вероятно этого недостаточно, там какая то иерархия стилей и код срабатывает для ПК, а не для mobile.

    Но вероятно этого недостаточно,

    Не «недостаточно», а поломали. (сужу только по Вашим описаниям на сайте не смотрел)

    когда напрямую в родительскую тему вношу те же изменения — всё в порядке. Видимо дело в порядке загрузки стилей. Наверно надо весь родительский style.css перенести в дочерний style.css и потом там править код

    Модератор Yuri

    (@yube)

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

    Нет, надо просто смотреть в браузере в инструментах разработчика что ломается и почему, и дополнять то, что сломалось.

    Вот, смотрите, в дочерней определены width и float для #easywp-right-sidebar. Эти правила перебили (отменили) правила из родительской, в т.ч. и те, которые в @media, и те перестали работать. Следовательно, в css дочерней их надо восстановить, т.е. прописать по новой.

    screenshot

    так и сделал — прописал по новой: скопировал весь код что был после слов и вставил вручную в style.css дочерней темы

    /* Responsive Media Queries
    -------------------------------------------------------------- */
    @media only screen and (max-width: 1167px) {
    #easywp-outer-wrapper {
        width: 80%;
        padding: 0;
        margin: 0 auto;
    }
    
    #easywp-header-wrapper {
        width: 100%;
        padding: 0;
        margin: 0;
        height: auto;
        border-left: 0 solid #a8a8a8;
        border-right: 0 solid #a8a8a8;
    }
    
    #easywp-header-inner {
        border-left: 0 solid #f9f9f9;
        border-right: 0 solid #f9f9f9;
    }
    
    #easywp-header-content {
        padding: 10px;
    }
    
    .easywp-logo-image {
        padding: 0;
        margin: 0 auto;
    }
    
    #easywp-header-left {
        width: 100%;
        padding: 0 0 10px;
        margin: 0;
        float: none;
        text-align: center;
    }
    
    #easywp-header-right {
        width: 100%;
        padding: 0;
        margin: 0;
        float: none;
        text-align: center;
    }
    
    #easywp-header-right .widget {
        float: none;
        padding: 0;
    }
    
    .easywp-nav-primary-wrapper {
        width: 100%;
    }
    
    #easywp-content-wrapper {
        width: 100%;
        margin: 0;
        padding: 0;
        background-image: none;
        clear: both;
    }
    
    #easywp-main-wrapper {
        width: 100%;
        padding: 10px;
        margin: 0;
        float: none;
    }
    
    #easywp-left-sidebar {
        width: 100%;
        padding: 10px;
        margin: 0;
        float: none;
        background: #e0e0e0;
    }
    
    #easywp-right-sidebar {
        width: 100%;
        padding: 10px;
        margin: 0;
        float: none;
        background: #e0e0e0;
    }
    
    .easywp-body-full-width #easywp-main-wrapper {
        padding: 10px;
    }
    
    #easywp-footer-widgets-container {
        border-left: 0 solid #a8a8a8;
        border-right: 0 solid #a8a8a8;
    }
    
    #easywp-footer-widgets {
        padding: 20px 10px;
        border-left: 0 solid #f9f9f9;
        border-right: 0 solid #f9f9f9;
    }
    
    .easywp-footer-widget-box {
        width: 100%;
        float: none;
        padding: 10px 0;
        margin: 0;
    }
    
    #easywp-site-info {
        height: auto;
    }
    
    #easywp-copyrights,#easywp-credits {
        width: 100%;
        padding: 5px 0;
        margin: 0;
        display: block;
        float: none;
        text-align: center;
        height: auto;
    }
    }
    
    @media only screen and (max-width: 768px) {
    #easywp-outer-wrapper {
        width: 100%;
    }
    }
    
    @media print {
    body {
        color: #000;
        background: #fff;
        font-size: 18px;
    }
    
    .entry-title {
        font-size: 28px;
    }
    
    #easywp-header-wrapper {
        display: none;
    }
    
    .easywp-nav-primary {
        display: none;
    }
    
    .easywp-social-icons {
        display: none;
    }
    
    #easywp-content-wrapper {
        background: #fff;
    }
    
    #easywp-left-sidebar {
        display: none;
    }
    
    #easywp-right-sidebar {
        display: none;
    }
    
    .entry-meta {
        display: none;
    }
    
    .easywp-readmore {
        display: none;
    }
    
    .entry-footer {
        display: none;
    }
    
    #easywp-footer-widgets-container {
        display: none;
    }
    
    #easywp-site-info-container {
        display: none;
    }
    }

    тема решена на половину — так как это перенесенный код не сохраняется при создании дубликата темы, он просто удаляется из style.css

    решил это так, создав отдельный файл стиля.
    @import url(../easywp-child-3/stylemobile.css);
    вопрос только в путях — как сделать относительный путь до текущей папки темы без необходимости прописывать конкретное название папки?

    @import url(stylemobile.css);

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