Как исправить отображение записей виджета Elementor Post в мобильной версии сайта

  Автор:
  748
Как исправить отображение записей виджета Elementor Post в мобильной версии сайта

Когда вы устанавливаете виджет Elementor Post (доступен в Elementor Pro) в классическом виде с изображение расположенным слева, в мобильной версии сайта есть ошибка.

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

Итак.

При настройках в Elementor:

Обложка: Классика

Позиция изображений: Лево

Вот так выглядят записи на компьютере (ноутбуке), и в мобильной версии сайта:

Отображение на компьютере
Отображение в мобильной версии

Как исправить?

К сожалению в настройках этого виджета нет настройки отображения изображения на разных устройствах. Поэтому используем css.

В виджете Записи => во вкладке Расширенные => Пользовательские стили вставить следующий css

@media only screen and (max-width: 767px) {
 .elementor-34066 .elementor-element.elementor-element-7b8acae.elementor-posts--thumbnail-left .elementor-post__thumbnail__link {
    
    float: none;
    margin:0 0 10px 0;
    display:block;
}

.elementor-posts--skin-classic .elementor-post {
    overflow: hidden;
    display: block;
}

}

Исправленная версия

Вы находите данную статью полезной или интересной? Поделитесь ею, пожалуйста, с другими - просто нажмите на кнопки ниже:

Анфиса Бреус

Анфиса Бреус - специалист по Wordpress с 2007 года. Создатель и разработчик многофункционального шаблона "AB-Inspiration" для самостоятельного создания и профессиональной настройки сайтов разного назначения на WordPress. Основатель клуба "Мастер WordPress" и автор курсов по создании и применению сайтов на WordPress. Фрилансер. Предприниматель. Спикер.

Как создать свой сайт на WordPress с закрытыми и отрытыми онлайн - курсами, с универсальным интернет - магазином, профессиональным блогом и высоко конверсионными лендингами для заработка в интернете 2021
Оставьте ваш комментарий или вопрос