Выравниваем кнопки в карточке товара по всей ширине в TILDA

Наш скрипт может выровнять кнопки внутри карточек товаров Тильда, оставив одинаковые отступы от краев

Время настройки: 1 минута

Генератор кода

Видео инструкция

Пример

Инструкция

Модификация работает с блоками: ST300, ST320N, ST310N, ST315N, ST305N

ВАЖНО: Порядок кнопок должен совпадать в настройках блока и в генераторе!

Модификация работает только если к блоку подключен каталог!

1. Выбираем вариант расположения кнопок в карточке товара в первом выпадающем списке, во втором выбираем как кнопки будут выглядеть в мобильной версии:

Вариант 1 (Подробней о товаре, Добавить в корзину, кнопки плюс/минус)
Вариант 2 (Добавить в корзину, Подробней о товаре, кнопки плюс/минус)
Вариант 3 (Две кнопки по 100%)
Вариант 4 (Две кнопки по 50% в 1 ряд)

2. Копируем сгенерированный HTML код и вставляем его в блок Т123;

Копировать код<!-- Как сделать кнопки в карточке товара по всей ширине в TILDA? -->
<!-- https://nolim.cc/knopki-po-shirine-kartochki-tovara -->
<style> [data-product-inv="0"] .t-store__card__btn { width: 100%; } a.js-store-prod-btn.t-store__card__btn.t-btn.t-btn_sm { width: 100%; } .t-store__card__btns-wrapper--quantity { display: block !important; } .t-store__card .t-store__prod__quantity { width: calc(50% - 2px) !important; } a.js-store-prod-btn2.t-store__card__btn.t-store__card__btn_second.t-btn{ width: calc(50% - 2px) !important; } .t-store__prod__quantity-input { width: 100%; } .t-store__card__btn { padding-left: 5px; padding-right: 5px; } @media screen and (min-width: 960px) and (max-width: 1220px) { .t-store__prod__quantity__minus-wrapper, .t-store__prod__quantity__plus-wrapper { min-width: 20px; width: 20px; height: 20px; margin: 0 1px; } }  @media screen and (max-width: 960px) { .t-store__card .t-store__prod__quantity { width: 100% !important; } a.js-store-prod-btn.t-store__card__btn.t-btn{ width: 100% !important; } a.js-store-prod-btn2.t-store__card__btn.t-store__card__btn_second.t-btn { width: 100%!important; } .t-store__card__btns-wrapper--quantity { display: block !important; } }  </style> <style> [data-product-inv="0"] .t-store__card__btn { width: 100%; } a.js-store-prod-btn.t-store__card__btn.t-btn{ width: calc(50% - 2px) !important; } .t-store__card__btns-wrapper.js-store-buttons-wrapper.t-store__card__btns-wrapper--quantity { width: 100% !important; } .t-store__card .t-store__prod__quantity { width: calc(50% - 2px) !important; } .t-store__prod__quantity-input { width: 100%; } .t-store__card__btn { padding-left: 5px; padding-right: 5px; } @media screen and (min-width: 960px) and (max-width: 1220px) { .t-store__prod__quantity__minus-wrapper, .t-store__prod__quantity__plus-wrapper { min-width: 20px; width: 20px; height: 20px; margin: 0 1px; } }  @media screen and (max-width: 960px) { .t-store__card .t-store__prod__quantity { width: 100% !important; } a.js-store-prod-btn.t-store__card__btn.t-btn{ width: 100% !important; } a.js-store-prod-btn2.t-store__card__btn.t-store__card__btn_second.t-btn{ width: 100%!important; } .t-store__card__btns-wrapper--quantity { display: block !important; } }  </style> <style> [data-product-inv="0"] .t-store__card__btn { width: 100%; } a.js-store-prod-btn2.t-store__card__btn.t-store__card__btn_second.t-btn{ width: 100%!important; } a.js-store-prod-btn.t-store__card__btn.t-btn{ width: calc(50% - 2px) !important; } .t-store__card .t-store__prod__quantity { width: calc(50% - 2px) !important; } .t-store__prod__quantity-input { width: 100%; } .t-store__card__btn { padding-left: 5px; padding-right: 5px; } .t-store__card__btns-wrapper--quantity { display: block !important; } @media screen and (min-width: 960px) and (max-width: 1220px) { .t-store__prod__quantity__minus-wrapper, .t-store__prod__quantity__plus-wrapper { min-width: 20px; width: 20px; height: 20px; margin: 0 1px; } }  @media screen and (max-width: 960px) { .t-store__card .t-store__prod__quantity { width: 100% !important; } a.js-store-prod-btn.t-store__card__btn.t-btn{ width: 100% !important; } a.js-store-prod-btn2.t-store__card__btn.t-store__card__btn_second.t-btn{ width: 100%!important; } .t-store__card__btns-wrapper--quantity { display: block !important; } }  </style> <style> [data-product-inv="0"] .t-store__card__btn { width: 100%; } a.js-store-prod-btn2.t-store__card__btn.t-store__card__btn_second.t-btn{ width: 100% !important; } a.js-store-prod-btn.t-store__card__btn.t-btn{ width: 100% !important; } } </style> <style> [data-product-inv="0"] .t-store__card__btn { width: 100%; } .t-store__card__btn { padding-left: 5px; padding-right: 5px; } a.js-store-prod-btn2.t-store__card__btn.t-store__card__btn_second.t-btn{ width: 50%; } a.js-store-prod-btn.t-store__card__btn.t-btn{ width: 50%; } .t-store__card__btn{ width: calc(50% - 4px) !important; } @media screen and (max-width: 670px){ .t-store__card__btn:nth-child(2) { margin-top: 0px !important; } }  @media screen and (max-width: 960px) { a.js-store-prod-btn.t-store__card__btn.t-btn{ width: 100% !important; } a.js-store-prod-btn2.t-store__card__btn.t-store__card__btn_second.t-btn{ width: 100% !important; } }  </style>