Представляю вам полностью адаптивный светлый информер. Установка и настройка доступна каждому
Цитата
Настройки для информера: [ Каталог статей · Материалы · Материалы: 6 · Колонки: 1 ]
Код
<?if($NUMBER$='1' || $NUMBER$='2')?> <div class="top1"> <a class="top1-cat" href="$CATEGORY_URL$">$CATEGORY_NAME$</a> <a href="$ENTRY_URL$"><img src="$IMG_URL1$" alt="$TITLE$" title="$TITLE$"></a> <span><a href="$ENTRY_URL$">$TITLE$</a> <p>$MESSAGE$</p> </span> </div> <?else?> <?if($NUMBER$='3')?><?endif?> <div class="top2"> <a href="$ENTRY_URL$"><img src="$IMG_URL1$" alt="$TITLE$" title="$TITLE$"></a> <span><h5><a href="$ENTRY_URL$">$TITLE$</a> </h5> <p>$MESSAGE$</p></span> </div> <?endif?>
А это добавить в стили CSS:
Код
.top1 {width: 48%; float: left; margin:0 5px; padding: 10px;float:left;} .top1:nth-child(2n){margin:0 10px;padding: 10px; } @media only screen and (max-width: 960px) { .top1 {width:98%; float: left; margin:0 5px; padding: 10px;} .top1:nth-child(2n){margin:0 10px !important;} .top1:nth-child(2n){margin:10px;} } @media screen and (max-width: 640px) { .top2, .top1 {width:auto !important;width:98%; float: left; margin:0 5px; padding: 10px;float:none !important;} } @media screen and (max-width: 400px) { .top2, .top1 {width:auto !important;width:98%; float: left; margin:0 5px; padding: 10px;float:none !important;} } a.top1-cat {color: #fff; display: block; font-size: 13px; height: 35px; line-height: 35px; padding: 0 15px; position: absolute; width: auto; background-color: rgba(27, 26, 26, 0.52);} .top1 img {width:100%; height: 220px;} .top1 span {display: block; height: 110px; overflow: hidden;} .top1 span a {color: #444; font-size: 16px; text-decoration: none; -webkit-transition: all ease-in-out 0.2s; -moz-transition: all ease-in-out 0.2s; -o-transition: all ease-in-out 0.2s; transition: all ease-in-out 0.2s; font-weight: bold; display: block;} .top1 span a:hover {color: red;} .top1 p {} .top2 {width: 48%; float: left; margin:0 5px; padding: 10px;} .top2 img {width:80px; height: 80px; float:left; margin:0 10px;} .top2 a {color: #444; font-size: 15px;line-height: 15px; text-decoration: none; -webkit-transition: all ease-in-out 0.2s; -moz-transition: all ease-in-out 0.2s; -o-transition: all ease-in-out 0.2s; transition: all ease-in-out 0.2s;} .top2 a:hover {color: red;} .top2 p {-webkit-margin-before: 0; -webkit-margin-after: 0; font-size: 12px;} .top2 span {display: block; height: 80px; overflow: hidden;}
В этой теме Вы можете задать вопрос о материале Адаптивный светлый информер на сайт.