• Вопрос без рабочей ссылки на проблему считается риторическим. Без ссылки и скриншота - провокацией!

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

Image CMS
#1
Добрый день!

Столкнулся с проблемой: необходимо добавить в хедер логотип, название и контактную информацию
На веб-версии всё хорошо
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/
 

Вложения

#4
Для мобильных устройств нужно использовать медиа запросы под конкретные разрешения экрана.
Правильно ли понял - достаточно добавить примерно такой код в style.css темы и на телефоне будет правильное отображение
Код:
@media only screen and (max-device-width: 480px) {
div#container {
    width: 10%;
}
}
?
 

searchingman

Гуру
Местный
#6
У Вас в "шапке" блоки с названием компании и тел. номеров для чего-то находятся в таблице.
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>
Нужно переверстать блоками, т.к. в таблице нельзя разместить одну ячейку под другой при адаптации под мобильные устройства.

Таблицы нужно использовать исключительно для вывода табличных данных, но не для верстки макета (размещения блоков).
 
Последнее редактирование:
#7
У Вас в "шапке" блоки с названием компании и тел. номеров для чего-то находится в таблице.
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>
Нужно переверстать блоками, т.к. в таблице нельзя разместить одну ячейку под другой при адаптации под мобильные устройства.

Таблицы нужно использовать исключительно для вывода табличных данных, но не для верстки макета (размещения блоков).
Спасибо!