#css #flexbox #shopify #shopify-template
#css #flexbox #Shopify #Shopify-шаблон
Вопрос:
Я пытаюсь выровнять элементы на своей странице коллекции с помощью flex — но безрезультатно. Я не могу понять, куда поместить код css. Я бы хотел, чтобы кнопки «подробнее» внизу описания каждого продукта выстраивались горизонтально. Я также хотел бы, чтобы описания, начиная с «Год выпуска дизайна», также выстраивались горизонтально. Я пытался наложить минимальную высоту на название аромата, но тогда оно все еще не выровнено на мобильных устройствах.
Я ценю любую помощь.
https://test-store-colleen.myshopify.com/
пароль: спасибо за вашу помощь
Страница, показанная ниже: https://test-store-colleen.myshopify.com/collections/gift-gallery
Изображение страницы коллекции
Пример некоторых css, которые я безуспешно пробовал.
/* component-grid */
.grid {
display: flex;
flex-wrap: wrap;
flex: 1;
justify-content: flex-end;
margin-bottom: 2rem;
margin-left: -0.5rem;
padding: 0;
list-style: none;
}
@media screen and (min-width: 750px) {
.grid {
margin-left: -1rem;
}
}
/* edited below to all align-items: flex-end; to align items on collection pages- Colleen */
.grid__item {
padding-left: 0.5rem;
padding-bottom: 0.5rem;
width: calc(25% - 0.5rem * 3 / 4);
max-width: 50%;
flex-grow: 1;
flex-shrink: 0;
}
@media screen and (min-width: 750px) {
.grid__item {
padding-left: 1rem;
padding-bottom: 1rem;
width: calc(25% - 1rem * 3 / 4);
max-width: 50%;
}
}
Ответ №1:
Судя по всему, вы на самом деле не настроили сгибание элемента сетки в себе и .learn-more-button
дочернем элементе. Это приведет вас к тому, к чему вы хотите:
ul#product-grid li.grid__item {
display: flex;
flex-direction: column;
}
ul#product-grid li.grid__item .learn-more-button {
display: flex;
flex-direction: column;
}
ul#product-grid li.grid__item .card-wrapper .card-information {
min-height: 70px;
}
Естественно, добавляйте или удаляйте классы для специфичности и медиа-запросов по желанию.
Комментарии:
1. Спасибо @nelloverflow У меня было ощущение, что я что-то упускаю! Я ценю это и попробую этот код и посмотрю, как он работает.
2. Это сработало отлично! Спасибо @Nelloverflow! Сегодня я узнал кое-что новое, я ценю ваше время.