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

[Tavlar]

Здравствуйте. В элементор создал секцию с 2 колонками. В каждую колонку поставил шорткод с товаром. Но на мобильных отображается криво.

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

 

[tuxfighter]

не знаю как это работает с елементером, на обычном сайте я сделал бы как-то так:

.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]

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

 

[tuxfighter]

но универсального решения так и не нашел

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

кнопка добавить в корзину была по центру?

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

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 условие, чтобы товар выравнивался по центру и заполнял всю ширину колонки

 

[tuxfighter]

как прописать в div условие, чтобы товар выравнивался по центру

это к волшебникам

 

[tuxfighter]

Ну так вы не назовете это тайное место?

 

[Tavlar]

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

 

[tuxfighter]

я правильно понял, что речь идет про главную страницу?
в начале каждого стиля добавьте .home (с пробелом!!) примерно так

.home .ast-article-single.product{

 

[Tavlar]

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

 

[tuxfighter]

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

 

[Tavlar]

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

 

[tuxfighter]

или так лучше не делать?

почему нет? так и проще и костыли никакие не нужны