Адаптивность стиля в мобильной версии. Проблема с логотипом

Stiksar

Местный
Сообщения
60
Реакции
37
Баллы
8
Здравствуйте!

Версия 2.3.6 Стиль дефолтный. Помогите пожалуйста разобраться с адаптивностью в мобильной версии:

1000088287.jpg

Нашёл причину моей проблемы,, но исправить не могу. Всё дело в этом коде текстового логотипа:

Less:
/* лого текст */
.header-logo-content-before() {
    font-family: 'Roboto';
    content: "сайт";
    color: #e7decb;
    font-weight: bold;
    text-shadow: 3px 3px 3px #0a0a0a;
}

.p-header-logo.p-header-logo--image {
    img {
        display: none;
    }

    a {
        &:before {
            .header-logo-content-before;
            font-size: 33px;
        }

        &:after {
            content: "- описание сайта";
            color: #e7decb;
            position: relative;
            font-size: 17px;
            top: -2px;
            text-shadow: 3px 3px 3px #0a0a0a;
        }
    }
}

@media (max-width:@xf-responsiveMedium) {
    .p-nav-inner .p-nav-smallLogo {
        max-width: 150px;
        img {
           display: none;
        }

        a {
            &:before {
                .header-logo-content-before;
                font-size: 20px;
            }

            &:hover {
                text-decoration: none;
            }
        }
    }
}

Как сделать я понять не могу? Чтобы отображалась картинка, а не текст в мобильной версии

UPD: из за длинного названия у меня и возникает проблема, когда я главное название урезаю content: "сайт";, то всё норм отображается и адаптивность есть, как чуть длиннее название то всё, проблема начинает возникать с адаптивностью

Решил я свою проблему, убрал часть кода и теперь у меня отображается в мобильном картинка логотипа а не этот текст:

Less:
@media (max-width:@xf-responsiveMedium) {
    .p-nav-inner .p-nav-smallLogo {
        max-width: 150px;
        img {
           display: none;
        }

        a {
            &:before {
                .header-logo-content-before;
                font-size: 20px;
            }

            &:hover {
                text-decoration: none;
            }
        }
    }
}

P.S. вот же я чудик :dash1:, сам с собой поговорил и решение нашёл :laugh3:
 
Последнее редактирование:
Назад
Верх Низ