Навигация
Получить консультацию менеджера
Нажимая на кнопку "Перезвонить мне" Вы соглашаетесь с политикой конфиденциальности
Социальные сети
Иконка ВК
Иконка Instagram
Иконка Телеграмм
Иконка Яндекс.Дзен

Карточки потоков в 2 ряда на телефоне

Обратите внимание. Техническая поддержка Tilda Publishing не осуществляет поддержку связанную с работой кода.

Данная модификация позволит добавить удобное отображение потоков на мобильных устройствах в 2 ряда
Добавьте уникальность в Ваш проект
Для Вашего удобства в коде есть комментарии, чтобы Вы могли ориентироваться и менять все так, как хотите.
Обратите внимание, что данный эффект будет работать только на мобильных устройствах из-за того, что на ПК есть возможность настроить блок внутри. Данный код не нагружает сайт для пользователя и не тормозит загрузку.
Как это выглядит?
    Как это добавить?
    Первый шаг
    Создаем любой блок с потоками. Выбираем необходимый поток в настройках и задаем нужные настройки внутри блока с потоком.
    Второй шаг
    Создаем блок T123 и помещаем код на страницу, где необходимо применить модификацию.
    
    <!--Взято с сайта https://digistudio.su/kartochki-potokov-v-2-ryada-na-telefone-->
    
    <style>
    @media (max-width:640px){
        .js-feed{
            padding: 0 10px;    /*Отступ от краев экрана*/    
        }
        .js-feed-container {
            display: grid;
            grid-template-columns: 1fr 1fr; /*Количество колонок на мобильной версии*/
            gap: 10px;  /*Отступ между карточками*/
        }
        
        .js-feed-post.t-feed__post.t-feed__grid-col {
            width: 100%;
            max-width: 100%;
            height: 100% !important;
            margin: 0 !important;
            padding: 0 !important;
        }
        
        .t-feed__col-grid__wrapper {
            height: auto !important;
            padding: 0 20px 20px 20px; /*Отступы вокруг текста*/
        }
        
        .t-feed__col-grid__post-wrapper {
            height: 100% !important;
        }
        
        .t-feed__post-title,
        .js-feed-post-descr,
        .t-feed__post-tag{
            overflow-wrap: anywhere; /*Перенос части слова, если оно слишком длинное*/
        }
        
        .t-feed__post__line-separator {
            display:none;
        }
    }
    
    </style>
    
    Как Вам модификация?
    Попробуйте наши модификации по пробному тарифу на 2 недели за 99 рублей.
    Смотрите также
      Made on
      Tilda