Введите часть искомого слова, названия или фразы...
↑ ↓
  1. Новые темы озаглавленные с маленькой буквы - удаляются без предупреждения!
  2. Вопрос без рабочей ссылки на проблему считается риторическим. Без ссылки и скриншота - провокацией!

Решено Правильно добавить информацию в хедер

Тема в разделе "Вопросы, советы и доработки.", создана пользователем Moonlight31, 15 авг 2016.

  1. Moonlight31

    Moonlight31

    Сообщения:
    57
    Симпатии:
    6
    Баллы:
    8
    Добрый день!

    Столкнулся с проблемой: необходимо добавить в хедер логотип, название и контактную информацию
    На веб-версии всё хорошо
    upload_2016-8-15_11-58-5.png

    На экране мобильного телефона (iphone 5s, 4s) правая часть уходит за пределы экрана
    upload_2016-8-15_11-54-57.png

    Добавлял эту информацию в хедер при помощи кода:
    Код:
    <p style="text-align: center;"><span style="font-size: 14pt;"><img class="size-full wp-image-111 alignleft" src="http://mynligzk.bget.ru/wp-content/uploads/2016/07/SE-Logo-04-1.png" alt="SE-Logo-04" width="209" height="130" /> <p style="text-align: left;">
       <table class=" aligncenter" style="width: 100%; height: 100%;">
    <tbody>
    <tr>
    <td style="width: 100%; border-color: #f6f7f7; background-color: #f6f7f7;"><span style="font-size: 24pt; font-family: Franklin Gothic, arial, helvetica, sans-serif; color: #1c438c;">ООО "СкладИнжиниринг"</span></td>
    <td style="width: 100%; border-color: #f6f7f7; text-align: right; background-color: #f6f7f7;"><span style="color: #1c438c; font-size: 14pt; font-family: Franklin Gothic, arial, helvetica, sans-serif;">+7 (4722) 50-52-37 +7(920) 201-52-37</span>
    <span style="color: #1c438c; font-size: 14pt; font-family: Franklin Gothic, arial, helvetica, sans-serif;"> info@skladinzhiniring.ru</span></td>
    </tr>
    </tbody>
    </table>
    в <div class="container">
    Подскажите, пожалуйста, как это можно сделать по нормальному?))
    Заранее спасибо за ответ

    Ссылка: http://mynligzk.bget.ru/
     

    Вложения:

  2. searchingman

    searchingman Местный

    Сообщения:
    1.634
    Симпатии:
    552
    Баллы:
    113
    • Нравится Нравится x 1
  3. Moonlight31

    Moonlight31

    Сообщения:
    57
    Симпатии:
    6
    Баллы:
    8
    Буду изучать, спасибо!
     
  4. Moonlight31

    Moonlight31

    Сообщения:
    57
    Симпатии:
    6
    Баллы:
    8
    Правильно ли понял - достаточно добавить примерно такой код в style.css темы и на телефоне будет правильное отображение
    Код:
    @media only screen and (max-device-width: 480px) {
    div#container {
        width: 10%;
    }
    }
    ?
     
  5. Moonlight31

    Moonlight31

    Сообщения:
    57
    Симпатии:
    6
    Баллы:
    8
  6. searchingman

    searchingman Местный

    Сообщения:
    1.634
    Симпатии:
    552
    Баллы:
    113
    У Вас в "шапке" блоки с названием компании и тел. номеров для чего-то находятся в таблице.
    HTML:
    <table class=" aligncenter" style="width: 100%; min-height: 100%;">
    <tbody>
    <tr>
    <td style="width: 100%; border-color: #f6f7f7; background-color: #f6f7f7;"><span style="font-size: 24pt; font-family: Franklin Gothic, arial, helvetica, sans-serif; color: #1c438c;">ООО "СкладИнжиниринг"</span></td>
    <td style="width: 100%; border-color: #f6f7f7; text-align: right; background-color: #f6f7f7;"><span style="color: #1c438c; font-size: 14pt; font-family: Franklin Gothic, arial, helvetica, sans-serif;">+7 (4722) 50-52-37 +7(920) 201-52-37</span>
    <span style="color: #1c438c; font-size: 14pt; font-family: Franklin Gothic, arial, helvetica, sans-serif;"> info@skladinzhiniring.ru</span></td>
    </tr>
    </tbody>
    </table>
    Нужно переверстать блоками, т.к. в таблице нельзя разместить одну ячейку под другой при адаптации под мобильные устройства.

    Таблицы нужно использовать исключительно для вывода табличных данных, но не для верстки макета (размещения блоков).
     
    Последнее редактирование: 17 авг 2016
    • Согласен Согласен x 2
  7. Moonlight31

    Moonlight31

    Сообщения:
    57
    Симпатии:
    6
    Баллы:
    8
    Спасибо!