Поддержка → Проблемы и решения → Нарушение пропорции элементов при просмотре на мобильных

Нарушение пропорции элементов при просмотре на мобильных

  • Решено dmitron

    (@dmitron)


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

    Здравствуйте, уважаемое сообщество!
    На сайте https://papinian.ru есть шапка сайта (header), что в принципе не удивительно.
    Шапка состоит из фоновой картинки, лого сайта в виде лица римского мужчины, а также названия сайта «Papinian.ru», краткого описания «Законы созданы для людей». При просмотре на компьютере всё это дело смотрится прекрасно.
    Возникает проблема при просмотре на мобильных устройствах.
    Лого, название и краткое описание съезжает, образуя ужасный трэш. Всё это происходит, как мне кажется, из-за того, что эти элементы не уменьшаются пропорционально для просмотра на мобильных устройствах.
    Гуглил, пишут про адаптивную верстку. Но сайт, в принципе, уже имеет адаптивный дизайн, только эти элементы осталось сделать адаптивнее.
    Также пишут про библиотеки для работы с мобильными устройствами, данную информацию мне не удалось найти.
    Смотрел плагины, типа WP Touch. Понял, что они мне вряд ли помогут.
    Кто знает решение проблемы или сталкивался с таким явлением, напиши пожалуйста.

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

Просмотр 5 ответов — с 1 по 5 (всего 5)
  • altkmv

    (@altkmv)

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

    В чем Ваш жуткий трэш? Может, в том, что Вы сам добавили картинку с вшитым текстом? ( https://papinian.ru/wp-content/uploads/2017/08/18.08.2017Head_Banner.jpg ) И при корректном уменьшении картинки текст на ней становится мелким и на него (как на часть картинки) налазит описательный текст?

    Не лепите текст на саму картинку. Или же для мобильных устройств переприсваивайте картинку без текста и будет как у людей. Или я не правильно понял?

    Так же за границы, возможно, вылазит слово «Последняя» в перечне страниц.

    Flector

    (@flector)

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

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

    Автор dmitron

    (@dmitron)

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

    Фоновая картинка со вшитым текстом меня полностью устраивает. Меня не устраивает, что лого и текст с названием сайта и описанием не масштабируется под мобильные устройства, а остается таким же как на ПК, то есть большого размера. То есть на ПК у лого font-size: 24px и на мобилках тоже. А нужно, чтобы этот атрибут уменьшался в зависимости от дисплея устройства.
    Насчет, «Или же для мобильных устройств переприсваивайте картинку без текста» — я тоже об этом думал, но не знаю, как это реализовать. Гуглил «разные header для различных устройств». Но не нашел подходящего плагина или кода.

    altkmv

    (@altkmv)

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

    Вы не совсем правильно понимаете термин «адаптивная верстка»… Если элемент не вылазит за границы экрана и не ломает общую структуру сайта, то это уже адаптивный элемент. А если Вы хотите сделать его больше/меньше/левее/правее, то это Ваши личные потребности.

    Для того чтобы что-то править на мобильных устройствах используйте:

    @media screen and (max-width: 420px) {
    здесь все стили, которые будут применяться на устройствах с шириной от 0 до 420px
    Сюда же пробуйте вставлять background-image для замены картинки и смотреть что получится.
    }

    Автор dmitron

    (@dmitron)

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

    Отличное решение. Спасибо. Буду пробовать!

Просмотр 5 ответов — с 1 по 5 (всего 5)
  • Тема «Нарушение пропорции элементов при просмотре на мобильных» закрыта для новых ответов.

Метки темы

Просмотр