Как сделать стабильную высоту карточек в Elementor без обрезания текста

Почему карточки в Loop Grid имеют разную высоту

Elementor выводит каждый элемент Loop Grid на основе его содержимого. Если один заголовок занимает одну строку, а другой — три, высота соответствующего текстового блока будет различаться. То же касается описаний, метаданных и других динамических полей.

Проблема становится особенно заметной, когда кнопка расположена сразу после текста. Она перемещается в зависимости от количества строк, поэтому в соседних карточках кнопки могут оказаться на разных уровнях.

Использование height с фиксированным значением формально выравнивает блоки, но создает другой риск: текст может выйти за пределы контейнера, наложиться на другие элементы или быть скрыт из-за overflow. Для динамического контента лучше ограничивать не максимальную, а минимальную высоту.

• длинные заголовки увеличивают высоту отдельных карточек;
• описания могут содержать разное количество строк;
• кнопки без Flex-структуры не прижимаются к нижнему краю;
• жесткий height может привести к обрезанию контента.

Как работает min-height для текстовых блоков

Свойство min-height задает минимальную высоту элемента, но не запрещает ему увеличиваться. Если текст помещается в установленное значение, блок занимает минимальное пространство. Если текст длиннее, высота автоматически увеличивается.

Для заголовка можно начать со значения 3.6em, а для описания — с 4.8em. Единица em зависит от размера шрифта самого элемента, поэтому такие значения удобнее фиксированных пикселей при адаптивном дизайне. При этом количество строк определяется не только числом em: на него также влияют font-size, line-height, ширина карточки и длина слов.

Значения необходимо проверить на реальном контенте. Если заголовки обычно занимают до двух строк, минимальная высота должна оставлять место примерно для двух строк. Не подбирайте значение только по одному короткому заголовку — проверьте самые длинные варианты.

• min-height выравнивает короткие блоки, но не обрезает длинные;
• em привязан к размеру текста, поэтому изменение типографики влияет на фактическую высоту;
• для заголовка и описания лучше использовать отдельные классы и отдельные значения;
• слишком большое значение создает лишние пустые области в карточках.

.product-card-title {
  min-height: 3.6em;
}

.product-card-description {
  min-height: 4.8em;
}

Пошаговая настройка классов в Elementor

Сначала откройте шаблон элемента Loop Item или тот шаблон карточки, который используется в вашем Loop Grid. Затем найдите виджет заголовка и добавьте ему CSS-класс product-card-title. Класс необходимо назначить именно заголовку, а не всей карточке.

Для описания создайте отдельный класс, например product-card-description. Это позволит независимо настраивать минимальную высоту заголовка и описания. Если в карточке используется динамическое поле, класс все равно добавляется к контейнеру или виджету, который выводит этот текст.

CSS можно добавить в Custom CSS, если такая возможность доступна в вашей конфигурации Elementor, или в общие стили сайта. Перед публикацией убедитесь, что в поле CSS-класса нет точки: точка используется уже в самом CSS-селекторе.

• заголовку назначьте класс product-card-title;
• описанию назначьте класс product-card-description;
• добавьте правила min-height для каждого класса;
• проверьте карточку с коротким и длинным текстом;
• сохраните изменения и очистите кеш, если продолжают отображаться старые стили.

.product-card-title {
  min-height: 3.6em;
}

.product-card-description {
  min-height: 4.8em;
}

Как прижать кнопку к нижнему краю карточки

Сам по себе min-height выравнивает текстовые блоки, но для одинакового положения кнопок необходима правильная структура карточки. Родительский контейнер карточки должен работать как Flex-контейнер с вертикальным направлением — column.

Для кнопки или ее обертки добавьте margin-top: auto. Свободное пространство между описанием и кнопкой будет распределено перед кнопкой, поэтому она переместится в нижнюю часть карточки. Этот прием работает корректно только тогда, когда кнопка является дочерним элементом того же Flex-контейнера, что и текстовые блоки.

В Elementor это можно настроить через параметры контейнера: для родительского контейнера выберите направление элементов Column, а для кнопки или ее обертки задайте автоматический верхний отступ. При необходимости те же правила можно записать с помощью CSS-классов.

• родительский контейнер карточки должен быть Flex;
• направление элементов — column;
• кнопка должна находиться внутри этого контейнера;
• для кнопки используйте margin-top: auto;
• убедитесь, что внутренний контейнер карточки растягивается по высоте доступного элемента Loop Grid.

.product-card {
  display: flex;
  flex-direction: column;
}

.product-card-button {
  margin-top: auto;
}

Адаптация min-height для планшетов и мобильных устройств

На узком экране карточка становится меньше по ширине, поэтому один и тот же заголовок может занимать не две, а три или четыре строки. Если оставить десктопное min-height без проверки, оно может создать слишком большую пустую область или все равно оказаться недостаточным.

Для мобильной версии уменьшите min-height, подберите другое значение или полностью отмените его. Выбор зависит от ширины карточки, размера шрифта и количества колонок на конкретном брейкпоинте. Не ориентируйтесь только на режим редактирования — проверьте страницу на реальном телефоне или в эмуляции разных значений ширины.

Если на мобильном устройстве используется одна колонка, выравнивание кнопок часто уже не имеет критического значения. В таком случае min-height для текстовых блоков можно убрать, чтобы карточки занимали только необходимую высоту.

• проверьте заголовки на самой узкой целевой ширине;
• уменьшите min-height для планшетов, если колонки становятся уже;
• на мобильных устройствах при необходимости используйте min-height: auto;
• не скрывайте переполненный текст ради одинаковой высоты;
• после изменения шрифтов или ширины колонок проверьте значения повторно.

@media (max-width: 767px) {
  .product-card-title {
    min-height: auto;
  }

  .product-card-description {
    min-height: auto;
  }
}

Проверка результата и типичные ошибки

После настройки просмотрите несколько карточек с разной длиной заголовков и описаний. Проверьте, не исчезает ли часть текста, не накладывается ли кнопка на описание и сохраняется ли одинаковое положение кнопок в пределах одной строки.

Если правило не работает, сначала проверьте название класса и элемент, которому он назначен. Частая ошибка — добавление класса к внешнему контейнеру вместо заголовка или использование другого написания класса в CSS.

Также проверьте каскад стилей. Другое правило с большей специфичностью или inline-стиль Elementor может перекрывать ваше значение. В крайнем случае можно временно использовать !important для диагностики, но лучше исправить структуру селекторов, а не оставлять его без необходимости.

• не используйте height для заголовка или описания, если текст является динамическим;
• не задавайте overflow: hidden без необходимости;
• не устанавливайте одинаковый min-height для заголовка и описания автоматически;
• проверяйте карточки с самым длинным реальным контентом;
• после изменения стилей очистите кеш браузера, плагина кеширования или CDN, если они используются.