• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Адаптивный вид материалов для файлов uCoz
Адаптивный вид материалов для файлов uCoz
Kosten
Понедельник, 03 Апреля 2017 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
Здесь пользователь сайта сбросил вид материала, но стили не знает как к нему подобрать или нет времени, но не суть. Решил сам разобраться. И вот хочу спросить, правильно ли все сделал, так как на сайте тестовом, он все корректно на адаптивность проходит, но реально нужно столько стилей на его прописать, что задумался и решил узнать.



Вообщем тема такая, и сам тестовый сайт, где можно посмотреть.

Клик здесь

Установка:

Для начало нужно стили поставить в главную страницу файлов или блога в 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;}

Вот вся установка и после нее вид материала адаптивный, но не много ли все это нужно поставить или как то можно меньше.

Так он показывает на узком мониторе или экране.

Прикрепления: 8289106.png (218.4 Kb) · 3614717.png (306.3 Kb)
Страна: (RU)
waak
Понедельник, 03 Апреля 2017 | Сообщение 2
Оффлайн
Заблокированные
Сообщений:588
Награды: 14
Kosten, Он же не рабочий даже на тестовом сайте с глюками
Страна: (RU)
Kosten
Вторник, 04 Апреля 2017 | Сообщение 3
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
waak, так здесь и разместил, что может до рабочего добить его.
Страна: (RU)
Kosten
Вторник, 04 Апреля 2017 | Сообщение 4
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
waak, а можно его сделать рабочем? Просто смотрю через браузер и вот как показывает и здесь сам понимаю, вот недавно на вид материала ты давал стили, а здесь их очень много и понимаю, что лишнее, но если только одну ссылку уберешь и уже не корректно.

Вот так сейчас с браузера.

Прикрепления: 8139015.jpg (90.5 Kb)
Страна: (RU)
waak
Вторник, 04 Апреля 2017 | Сообщение 5
Оффлайн
Заблокированные
Сообщений:588
Награды: 14
Kosten, Не хочу разбираться в этом коде проще написать свой
Страна: (RU)
Kosten
Вторник, 04 Апреля 2017 | Сообщение 6
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
waak, написал рабочий и адаптивный код на вид материала, что ЗДЕСЬ можете посмотреть.
Страна: (RU)
sizift1
Суббота, 28 Апреля 2018 | Сообщение 7
Оффлайн
Пользователи
Сообщений:6
Награды: 0
можно меньше..
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Адаптивный вид материалов для файлов uCoz
  • Страница 1 из 1
  • 1
Поиск: