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

[Moonlight31]

Добрый день!

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


На экране мобильного телефона (iphone 5s, 4s) правая часть уходит за пределы экрана


Добавлял эту информацию в хедер при помощи кода:

<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/

 

[searchingman]

Для мобильных устройств нужно использовать медиа запросы под конкретные разрешения экрана.

 

[Moonlight31]

Для мобильных устройств нужно использовать медиа запросы под конкретные разрешения экрана.

Буду изучать, спасибо!

 

[Moonlight31]

Для мобильных устройств нужно использовать медиа запросы под конкретные разрешения экрана.

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

@media only screen and (max-device-width: 480px) {
div#container {
    width: 10%;
}
}

?

 

[Moonlight31]

help)

 

[searchingman]

У Вас в "шапке" блоки с названием компании и тел. номеров для чего-то находятся в таблице.

<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>

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

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

 

[Moonlight31]

У Вас в "шапке" блоки с названием компании и тел. номеров для чего-то находится в таблице.

<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>

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

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

Спасибо!