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

Тема в разделе "Дизайн, оформление и шаблоны", создана пользователем Zhezkazganetcs, 14 фев 2016.

  1. Zhezkazganetcs

    Zhezkazganetcs Продвинутый пользователь

    Сообщения:
    819
    Симпатии:
    108
    прописал телефоны
    но на мобильной версии как то криво
    phones.JPG
    как исправить чтобы все телефоны со значками были с новой строки и увеличить расстояние между строками?
     
    Последнее редактирование: 2 июн 2017
  2. Ivan777

    Ivan777 Новичок

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

    upload_2016-2-14_16-4-20.png
     
  3. Zhezkazganetcs

    Zhezkazganetcs Продвинутый пользователь

    Сообщения:
    819
    Симпатии:
    108
    help
    нужно прописать поведение в @media
    вопрос: как?
     
  4. Vlad

    Vlad Эксперт

    Сообщения:
    3.901
    Симпатии:
    939
    открываем 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
     
    Zhezkazganetcs и Bkmz нравится это.
  5. Zhezkazganetcs

    Zhezkazganetcs Продвинутый пользователь

    Сообщения:
    819
    Симпатии:
    108
    создал под каждый телефон отдельный блок
    в 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 вроде бы и без них работает
     
    Последнее редактирование: 2 июн 2017