Страница 1 из 11
Форум » uCoz » Помощь по uCoz » Вид материала Yraaa (изменить) (Немного изменить)
Вид материала Yraaa (изменить)
Миха62 Offline
Проверенный
0
Дата: Суббота, 30.04.2016, 14:57 | Сообщение # 1
Подскажите как уменьшить вид материала в два или три раза всю голову сломал.
Есть вариант этого вида материала, но нужно для мобильной версии сайта так как на картинке:



Код
<div class="mtr">
    <div class="im">
    <div class="inim">
     <?if($IMG_URL1$)?><a href="$ENTRY_URL$"><img src="$IMG_URL1$" width="300" alt="$TITLE$" title="$TITLE$" /></a>
     <?else?><a href="$ENTRY_URL$" >
     <img src="/bordfotonet.jpg" width="300" alt="$TITLE$" title="$TITLE$" /></a><?endif?>
    </div>
    </div>
    <div class="mtr_td">
    <div class="name_mtr"><a href="$ENTRY_URL$">$TITLE$</a>$MODER_PANEL$</div>
    <div class="article_counters"><span class="dats">$DATE$ в $TIME$</span><?if($CATEGORY_NAME$)?><a href="$CATEGORY_URL$"><span class="catalog">$CATEGORY_NAME$</span></a><?endif?><span class="views">$READS$</span><?if($COMMENTS_URL$)?><a href="$COMMENTS_URL$"><span class="coms">$COMMENTS_NUM$</span></a><?endif?></div>
    <p class="mtr_d">
     <font style="font-size: 110%; color:#498bfa;"><b>$OTHER1$</b></font>
    </p>
    <p class="mtr_d">
     <?if(len($MESSAGE$)>70)?><?substr($MESSAGE$,0,70)?>...<?else?>$MESSAGE$<?endif?>
    </p>
    </div>
</div>



Код
.mtr {padding:20px;display:table}
.mtr .article_counters {margin-bottom:-10px;}
.mtr .im {background:#fff;padding-right:15px;display:table-cell;vertical-align:top}
.mtr_td {display:table-cell;vertical-align:top}
.mtr .inim {width:300px;height:132px;overflow:hidden}
.mtr_descr {margin:0;position:absolute;top:-9000px}
.name_mtr {margin-bottom:7px;font-size:16px;font-weight:bold}
.article_counters {margin-bottom:14px;font-size:13px;color:#8c8c8c}
.article_counters span {display:inline-block;margin-right:10px}
.article_counters .dats {background:url('http://iconfaorum/time.png') 0px 1px no-repeat;padding-left:20px}
.article_counters .views {background:url('http://iconfaorum/views.png') 0px 1px no-repeat;padding-left:20px}
.article_counters .coms {background:url('http:///iconfaorum/comment.png') 0px 0px no-repeat;padding-left:20px}
.article_counters .catalog {background:url('http://iconfaorum/catalog.png') 1px 1px no-repeat;padding-left:20px}
.article_counters .user {background:url('http://iconfaorum/user.png') 0px 1px no-repeat;padding-left:20px}
.name_mtr a {color:#173a51}
.views {background:url('http://iconfaorum/views.png') 0px 1px no-repeat;padding-left:20px}
.coms {background:url('http://iconfaorum/comment.png') 0px 0px no-repeat;padding-left:20px}


Делаю этот вариант для доски объявлений, как на всеми известных площадках. Дизайн сайта адаптивный и нужно просто для:

Код
@media only screen and (max-width: 460px)


свой дизайн, ни как не получается подобрать.

Делал в коде.пен. немного получилось но плохо. В тексте объявлений некоторые объявление начинаются с <p>, а некоторые просто чистый текст.

и размер шрифта уменьшается в одних объявлениях, а в других остаётся прежним.

Пожалуйста подскажите как написать классы что бы было как на картинке выше?
Прикрепления: 6672554.jpg(11Kb)
Профиль
Миха62 Offline
Проверенный
0
Дата: Суббота, 30.04.2016, 15:29 | Сообщение # 2
waak,

Подскажите как текст прописать, уже замучался)
Профиль
waak Offline
Проверенный
41
Дата: Суббота, 30.04.2016, 15:50 | Сообщение # 3
В виде материалов есть класс . mtr_d

если при добавлении вы добавили p тогда вам нужно прописать стили для этого вот так
Код
.mtr_d, .mtr_d p {тут стили для p и обычного текста  цвет размер  }


Помог? ставь +
Разработка дизайна - верстка, помощь по установке шаблона на uCoz.
Связь
skype - tolik-waak
Мой сайт
Профиль
Миха62 Offline
Проверенный
0
Дата: Суббота, 30.04.2016, 16:32 | Сообщение # 4
waak, жалко не получилось. Текст всё ровно крупный остался, а есть где вид материала для доски объячвления адаптивный. Просто картинка, название, цена и если влезит текст?
Профиль
maptbih007 Offline
Проверенный
0
Дата: Суббота, 07.05.2016, 17:46 | Сообщение # 5
Цитата Миха62 ()
waak, жалко не получилось. Текст всё ровно крупный остался, а есть где вид материала для доски объячвления адаптивный. Просто картинка, название, цена и если влезит текст?

Попробуй к стилям добавить important - Пример: width: 100%!important;


Профиль
Форум » uCoz » Помощь по uCoz » Вид материала Yraaa (изменить) (Немного изменить)
Страница 1 из 11
Поиск: