Товары в магазине не совпадают из-за названия продукта

Это должен быть простой вопрос для всех вас.

Наши продукты WooCommerce не будут выравниваться из-за длины названия продукта. Я хочу исправить это с помощью более последовательной «сетки». Вы все можете помочь? Я знаю, что это связано с некоторыми CSS, но я не могу понять, что делать. Любая помощь будет высоко ценится.

Снимок экрана

Я пробовал некоторые фрагменты CSS, но безрезультатно.

Страница магазина, чтобы увидеть

css wordpress woocommerce

18.07.2019 16:21

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

954

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

добавить фиксированную высоту к .woocommerce .products h2, .woocommerce .cross-sells h2 вы можете изменить justify-content, чтобы расположить текст

.woocommerce .products h2, .woocommerce .cross-sells h2 {
    font-size: 1.0em;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 0 3%;
    margin: 0 3% 0.2em;
    display: inline-block;
    background: #f6f6f6;
    height: 65px;
    display: inline-flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
}

Спасибо - это создает довольно большие разрывы между названием продукта и рейтингом. Интересно, можем ли мы сделать ту же концепцию, но под звездным рейтингом?

— 18.07.2019 16:28

Красивый. Спасибо @RamSegev!

— 18.07.2019 16:53

18.07.2019 16:23