Здесь пользователь сайта сбросил вид материала, но стили не знает как к нему подобрать или нет времени, но не суть. Решил сам разобраться. И вот хочу спросить, правильно ли все сделал, так как на сайте тестовом, он все корректно на адаптивность проходит, но реально нужно столько стилей на его прописать, что задумался и решил узнать.
Вообщем тема такая, и сам тестовый сайт, где можно посмотреть.
Клик здесь
Установка:
Для начало нужно стили поставить в главную страницу файлов или блога в head
Код
<link rel="stylesheet" href="http://pluton.clan.su/Areg/73/responsive.css">
<link rel="stylesheet" href="http://pluton.clan.su/Areg/grid.css">
Потом сам вид материалов:
Код
<div id="entryID4">
<div class="shortstory">
<div class="margin">
<figure>
<img src="$IMG_URL1$" alt="$TITLE$">
<div class="overlay">
<div class="date">$DATE$ $TIME$ $WDAY$</div>
<span class="rates"><div class="ratebox2"><i class="fa fa-thumbs-o-up"> $RATING$ </i></div></span>
<div class="comment"><i class="fa fa-comments-o"></i> $COMMENTS_NUM$ </div>
</div>
</figure>
</div>
<a href="$ENTRY_URL$">
<div class="title">$TITLE$</div>
<div class="short"><?if(len($MESSAGE$)>376)?><?substr($MESSAGE$,0,376)?>.....<?else?>$MESSAGE$<?endif?></div>
</a>
<div class="catPages1" align="center" style="clear:both;" id="pagesBlock1"></div>
</div>
И стили в CSS:
Код
.shortstory {
position: relative;
background: white;
padding: 15px;
border: 1px solid #e7e7e7;
box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
}
/* line 793, ../sass/style.sass */
.shortstory:hover .title {
color: #0077db;
}
/* line 797, ../sass/style.sass */
.shortstory:hover figure:before {
width: 100%;
}
/* line 802, ../sass/style.sass */
.shortstory .title {
font-size: 1.4rem;
}
/* line 804, ../sass/style.sass */
.shortstory img, .shortstory figure {
float: left;
width: 100%;
height: 240px;
position: relative;
margin-right: 15px;
}
/* line 810, ../sass/style.sass */
.shortstory img:before, .shortstory figure:before {
content: "";
height: 4px;
width: 10%;
position: absolute;
bottom: 0;
background: #0077db;
z-index: 1;
}
/* line 818, ../sass/style.sass */
.shortstory .overlay {
position: absolute;
bottom: 0;
width: 100%;
height: 100%;
display: block;
}
/* line 824, ../sass/style.sass */
.shortstory .overlay .comment, .shortstory .overlay .ratebox2, .shortstory .overlay .category a {
display: block;
position: absolute;
bottom: 0;
padding: 13px 10px;
color: white;
text-shadow: 1px 1px 5px black;
font-weight: 700;
font-size: 1rem;
right: 0;
}
/* line 834, ../sass/style.sass */
.shortstory .overlay .category a {
left: 0;
}
/* line 836, ../sass/style.sass */
.shortstory .overlay .comment {
right: 50px;
}
/* line 838, ../sass/style.sass */
.shortstory .overlay .ratebox2 a {
color: white;
display: inline-block;
margin-right: 3px;
}
/* line 842, ../sass/style.sass */
.shortstory .title {
font-weight: 500;
font-size: 1.3rem;
color: #333333;
margin-bottom: 20px;
line-height: 1.6rem;
}
/* line 848, ../sass/style.sass */
.shortstory .date {
color: white;
display: inline-block;
padding: 5px;
background: rgba(0, 119, 219, 0.73);
font-size: 0.75rem;
}
/* line 854, ../sass/style.sass */
.shortstory .margin {
float: left;
width: 50%;
margin: -15px 1px -15px -35px;
}
/* line 858, ../sass/style.sass */
.shortstory .short {
color: #524E4E;
font-size: 0.95rem;
line-height: 1.25rem;
}
/*Podcerkivanie*/
a:link {text-decoration:none;}
Вот вся установка и после нее вид материала адаптивный, но не много ли все это нужно поставить или как то можно меньше.
Так он показывает на узком мониторе или экране.