|
|
Модератор форума: Yuri_G |
Сообщество uCoz » Мастерская uCoz » Дизайн: управление шаблонами » Уменьшить вид материала в два раза (Подскажите) |
Уменьшить вид материала в два раза |
Подскажите как уменьшить вид материала в два или три раза всю голову сломал.
Есть вариант этого вида материала, но нужно для мобильной версии сайта так как на картинке: Код <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) свой дизайн, ни как не получается подобрать Прикрепления:
0440308.jpg
(11.4 Kb)
Сообщение отредактировал MikhailovCity - Пятница, 29 Апр 2016, 22:10:30
|
| |||
| |||