Дочерняя тема «сломала» адаптивность

  • Решено jurvrn

    (@jurvrn)


    6 лет, 2 месяца назад

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

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

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

    (@sevlad)

    6 лет, 2 месяца назад

    может не надо было копировать все php -файлы в дочернюю тему

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

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

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

    Автор jurvrn

    (@jurvrn)

    6 лет, 2 месяца назад

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

    SeVlad

    (@sevlad)

    6 лет, 2 месяца назад

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

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

    Автор jurvrn

    (@jurvrn)

    6 лет, 2 месяца назад

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

    Модератор Юрій

    (@yube)

    6 лет, 2 месяца назад

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

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

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

    screenshot

    Автор jurvrn

    (@jurvrn)

    6 лет, 2 месяца назад

    так и сделал — прописал по новой: скопировал весь код что был после слов и вставил вручную в 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;
}
}
    Автор jurvrn

    (@jurvrn)

    6 лет, 2 месяца назад

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

    Автор jurvrn

    (@jurvrn)

    6 лет, 2 месяца назад

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

    Автор jurvrn

    (@jurvrn)

    6 лет, 2 месяца назад

    @import url(stylemobile.css);

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