Question

Добрый день.

Использую на сайте стандартный адаптивный шаблон от Юкоз, который отлично адаптируется под моб.устройства, вот только почему-то информер на главной странице не хочет адаптироваться под мобильные устройства и наезжает на меню сайта.

Вот код информера

 

<div class="informer opacity">
 <a href="$ENTRY_URL$"><div class="informer_title"><b><?if(len($TITLE$)>35)?><?substr($TITLE$,0,33)?>...<?else?>$TITLE$<?endif?></b></div>
 <div class="informer_img">
 <span><img align="left" title="$TITLE$" src="$IMG_URL1$"></span>
 </div>
</a>
<div class="informer_bottom">
 <ul class="informer_statistics">
 
 <li><span>$READS$</span><img src="/inf_mat/ico_Eye.png" alt="просмотров"></li>
 <?if($COMMENTS_NUM$)?><li><span>$COMMENTS_NUM$</span><img src="/inf_mat/ico_comment.png" alt="комментарий"></li> <?endif?>
 </ul>
 </div>
 </div>

Вот скриншоты того, как данный информер не хочет адаптироваться под мобильные и наезжает на меню

Помогите, пожалуйста, сделать информер адаптивным для мобильных устройств.

Comments

Спасибо, но переделать для себя не смогу, ибо не знаю, как? ((

Answer 1

Можно добавить в таблицу стилей CSS следующие стили:

.infTd {
    max-width: 100%;
    display: inline-table;
}

станет немного лучше.

Comments

Ой, я забыла в сообщении написать CSS для данного информера. Вот он

 

/*--Информер на главной странице--*/
 
 .informer {
 width:160px;
 margin: 5px;
 overflow:hidden;
 background: #fff;
 border: 2px solid #ACACAC;
 font:11px Verdana,Arial,Helvetica, sans-serif;
 text-shadow: 1px 1px 1px #fff;
 color: #0A2526;
 border-radius:5px;
}
 
.informer a {
color: #737272;
}
 
.informer a:hover {
color: #c9c4c4;
}
.informer_title {
 height: 30px;
 float:left;
 width:160px;
 background:#f4f4f4;
 padding: 4px 4px;
 font: 125% Verdana,Arial,Helvetica, sans-serif; font-weight: 700;
 font-color: #737272;
 border-bottom: 1px solid #d1d1d1;
}
 
.informer_img span
{display: block;
 height: 70px;
width: 70px;
padding-left: 45px;
overflow: hidden;}
 
.informer_img span img
{width: 70px;}
 
 
.informer_bottom {
 float:left;
 width:100%;
 background:#f4f4f4;
 border-top: 1px solid #d1d1d1;
}
 
.informer_category{
 float:left;
}
 
.informer_statistics{
 float:right;
 margin:0;
 padding: 0;
 margin-right: -2px;
 list-style:none;
 border-left: 1px solid #d1d1d1;
}
 
.informer_statistics li {
 float:left;
 height:20px;
 padding: 3px 3px 2px 3px;
 border-right: 1px solid #d1d1d1;
 border-left: 1px solid #fff;
}
 
.informer_statistics span{
 float:left;
 margin: 0px 5px 0px 0px;
}

Куда именно вставлять ваш код?

---

Катя,

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

---

Сделала, как вы сказали, стало немного лучше, но не совсем то, что хотелось бы. Получается, если смотреть на мобильном, то информер просто вытягивается в одну вертикальную линию, а не сжимается до меньшего размера, как должно быть. Вместо 4 уменьшенных столбиков, получается 1.  Выходит, что размеры информера не меняются в меньшую сторону, а остаются как есть... ((

---

Катя,

Не нравится такой вид, заказывайте адаптацию у фрилансеров, надеюсь знаете куда обращаться.

---

Конечно, знаю, куда - тут всегда при первой возможности к фрилансерам посылают. Уже надоело это слышать.  Если бы была возможность обратиться к ним, сюда писать не стала бы.