Текст кнопки Купить съезжает вниз в мобил.версии

[marmariska]

Убрала иконку корзины возле Купить в категориях, в мобильной версии тогда получается пустой квадрат. Поставила отображение текста Купить, но при отображении в 2-х колонках в мобильной версии текст видимо не влазит и съезжает вниз на след.строчку. Как его потеснить, уменьшить шрифт или вместо Купить поставить иконку корзины, но только в мобильной версии?? Умные люди, направьте в нужную сторону...

[LiLu]

как то так

<button type="button" onclick="cart.add('{{ product.product_id }}');"><span class="visible-xs"><i class="fa fa-shopping-cart"></i></span> <span class="hidden-xs hidden-sm hidden-md">{{ button_cart }}</span></button>

 

[SiteMix]

Чтобы иконка корзины была только в мобильно версии нужно скрыть её для остальных. Например, так:

@media (min-width:768px) {

.product-thumb.transition .fa-shopping-cart {
    display: none;
}

}

Естественно, сначала надо вернуть её, если она была выпилена.

 

Чтобы уменьшить размер шрифта можно добавить такое правило:

@media (max-width:767px) {

.product-thumb.transition .button-group {
    font-size: 11px;
}

}

[marmariska]

@LiLu получилось, спасибо!

 

@SiteMix , а вот такой фокус со шифтом текста к сожалению не получился. И теперь вы совершенно правы: 

2 часа назад, SiteMix сказал:

Естественно, сначала надо вернуть её, если она была выпилена.

 

Картинку нашла в интернете. К чему теперь ее привязать, чтобы отображалась? 

Змінено 15 жовтня 2019 користувачем marmariska

[SiteMix]

1 час назад, marmariska сказал:

@SiteMix , а вот такой фокус со шифтом текста к сожалению не получился.

Я дал пример. Дальше адаптируйте под себя.