Как красиво сделать расположение телефонов для мобильной версии?

прописал телефоны
но на мобильной версии как то криво

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

 

Мимо проходил, но мне кажется значки должны быть одного размера + уменьшить размер шрифта в стилях. А пока значки старые, добавил вот <br> после каждой строки и получилось вот что со шрифтом 28, не знаю на сколько это правильно %)

 

help
нужно прописать поведение в @media
вопрос: как?

 

открываем stylesheet.css и смотрим пример типа

Код:

@media (max-width: 767px) {
    .product-thumb .button-group button, .product-thumb .button-group button + button {
        width: 33.33%;
    }
}

и делаем тоже самое, но для себя. Но для начала обернуть каждый телефон в блок, например

Код:

<div class="toto">
<img alt="375232581462" src="http://welltorg.com/image/catalog/img/phone.jpg" title="375232581462"> <a href="tel:+375232581462"><span>+375(232)</span><b>58-14-62</b></a>
</div>

а потом работать со стилями display:block и display:inline-block

 

создал под каждый телефон отдельный блок
в stylesheet.css прописал

Код:

.phoneNumber{
       color: #333;
    font-size: 27px;
    margin: -5px 11px 15px 5px;
    font-family: 'Algerian', sans-serif;
    float:left;
}

.phoneNumber span{
    font-size: 19.2px;
}

а вот display:block и display:inline-block вроде бы и без них работает