• Никакой политики на форуме. Иначе - бан!
  • Вопрос без рабочей ссылки на проблему считается риторическим. Без ссылки и скриншота - провокацией!
  • Темы озаглавленные с маленькой буквы или капсом удаляются без предупреждения!

Выравнивание товара внутри колонки

Tavlar

Новичок
Здравствуйте. В элементор создал секцию с 2 колонками. В каждую колонку поставил шорткод с товаром. Но на мобильных отображается криво.
пример.jpg
Как сделать так, чтобы товар выравнивался по центру и чтобы имя товара помещалось на всю ширину колонки(дабы не переносилась на несколько строк)?
Пробовал к шорткоду приписать <div align="center">[products ids="5321"]</div>, но походу что то делаю не правильно. Заранее благодарен за ответы
 
Ссылка на проблему
https://nekrapiva.ru/

tuxfighter

Гуру
Местный
не знаю как это работает с елементером, на обычном сайте я сделал бы как-то так:
CSS:
.ast-article-single.product{
    margin: 0 auto !important;
    width: 100% !important;
}

.astra-shop-thumbnail-wrap{
    width: 50%;
    margin: 0 auto;
}

h2.woocommerce-loop-product__title,
.ast-woo-product-category, .price{
    width: 100%;
    text-align: center !important;
}
 

Tavlar

Новичок
Благодарю, текст выровнялся по центру, только к кнопке добавить в корзину не применилось. как сделать так, чтобы и кнопка добавить в корзину была по центру? и еще вопрос, как сделать так, чтобы кнопка добавить в корзину была на одном уровне у всех товаров? при длинных названиях кнопка смещается вниз. на форуме этот вопрос обсуждался, но универсального решения так и не нашел
пример2.jpg
 

tuxfighter

Гуру
Местный
но универсального решения так и не нашел
универсальное решение: писать для каждого сайта индивидуальные стили.

кнопка добавить в корзину была по центру?
в последнем стиле добавить класс этой кнопки. получиться


CSS:
h2.woocommerce-loop-product__title,
.ast-woo-product-category, .price, .add_to_cart_button{
 

Tavlar

Новичок
все работает, но пришла беда откуда не ждали. эти стили распространяются на все товары, которые я вывожу, а мне нужно было только в одном месте применить.
Могу ли прописать все эти стили в данную конструкцию, если да - то как?
Код:
<div align="center">[products ids="5321"]</div>
 

tuxfighter

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

Tavlar

Новичок
я не говорил что знать должны или кто то что то не так подсказал. я благодарен, что помогли. но когда вопрос решился и я перешел к следующему пункту сайта, этот момент обнаружился.
буду признателен, если подскажете, как прописать в div условие, чтобы товар выравнивался по центру и заполнял всю ширину колонки
 

Tavlar

Новичок
Да, конечно. Я уж отчаялся, если честно. Обрисую картину, может я вообще перемудрил и, возможно, все сделать легче и проще. Мне нужно, после карусели с картинками(купить букет и собрать букет), вывести 6 определенных товаров (3 ряда по 2 штуки в ряд)
 

tuxfighter

Гуру
Местный
я правильно понял, что речь идет про главную страницу?
в начале каждого стиля добавьте .home (с пробелом!!) примерно так
CSS:
.home .ast-article-single.product{
 

Tavlar

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

tuxfighter

Гуру
Местный
вы хотите витрину сделать главной?
или продублировать витрину?
или снова не так понял?
 

Tavlar

Новичок
думал на главной разместить витрину.
или так лучше не делать?
 
Сверху Снизу