Question

Здравствуйте.

Помогите настроить вид материалов в несколько столбиков. На компьютере все отображается нормально (отчетливо видно 4 столбика), а на мобильном и планшете все плывет, просто ужас какой-то.

Вот скриншот

На данный момент вид материала имеет такой код:

 

<div style="width:24.6%; margin:0% 0.2% 0% 0.2%; align=left; float:left; valign:top;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" hieght="100%" class="eBlock" ><tr><td style="padding:3px;">
<?if($MODER_PANEL$)?><div style="float:right">$MODER_PANEL$</div><?endif?>
<div class="eTitle" style="text-align:center; height:75px;"><a href="$ENTRY_URL$">$TITLE$</a></div>
<?if($MESSAGE$)?><div class="eMessage" style="text-align:left;clear:both;padding-top:2px;padding-bottom:2px; height:110px;">$MESSAGE$</div><?endif?><div class="eDetails" style="clear:both;">
</td></tr> </table><br /></div>

Помогите сделать так, чтобы на мобильном столбики с материалом тоже корректно отображалась.

Answer 1

Чтобы фото не плыло, в стилях ищем строку номер 434:

.eMessage img,.eText img {float:none;max-width:100%;margin:0 0 10px;}

добавить выделенное.

После ищем в стилях строки 404 и 481:

.eBlock {position:relative;margin:0 -20px;width:768px;}

.eBlock {width:456px;}

где выделенное заменить на 100%

Comments

Сделала как вы сказали, стало чуть лучше, но еще есть недочеты, наезжают надписи друг на друга.

Answer 2

Для оптимизации под моб. устройства используйте медиа правила http://htmlbook.ru/css/media в вашем случае с наскока не сделать, если не можете сами, закажите у фрилансеров.

Comments

Другого ответа я  и не ожидала, кроме как пойти на....вернее к...фрилансерам. Спасибо за помощь.

---

Катя,

В моём ответе ключевое слово "с наскока", это означает определённые трудовые затраты соответственно не бесплатно, если можно сделать с наскока, то тут ответов было бы вагон и маленькая тележка.