Як зробити стабільну висоту карток в 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, якщо вони використовуються.