• Новые сообщения
  • Участники
  • Правила форума
  • Поиск
  • RSS
  • Страница 1 из 1
  • 1
Форум » Записки веб-разработчика » Уроки Веб-мастера » Сделать адаптивным вид материала файлов uCoz
Сделать адаптивным вид материала файлов uCoz
Kosten
 		Дата: Воскресенье, 2017-04-02, 00:58 | Сообщение 1
Администраторы
Сообщений:19249
Награды: 56
« 467 »


Приветствую всех, может кто даст мастер класс или просто покажет, как сделать адаптивным вид материала в колонку, в котором нет не одной ссылки, только на переход и на изображение. На тестовом сайте ставил, по сути какая то адаптация есть, но реально должно идти в одну картинку, здесь же они просто сжиматься, хотя прокрутки в низу не наблюдается.

Это сам клиент:



Так когда на узком экране:



Код:



CSS:

Прикрепления: 1768234.jpg(60.8 Kb) · 5458510.jpg(55.4 Kb)
Страна: (RU)
waak
 		Дата: Воскресенье, 2017-04-02, 19:20 | Сообщение 2
Друзья сайта
Сообщений:509
Награды: 13
« 124 »


Kosten,
Код
@media screen and (max-width: 1000px) {.short-item {width: 30%;margin: 10px 1.5%;}}
@media screen and (max-width: 700px) {.short-item {width: 44%;margin: 10px 3%;}}
@media screen and (max-width: 500px) {.short-item {width: 94%;}}

вот так как то

и картинки желательно добавить вот такие стили
Код
.short-img img {min-width: 100%;max-width: 100%;}

чтоб она тоже растягивалась
http://talantlev.ucoz.ru Скрипты от автора помощь по uCoz

Сообщение отредактировал
waak - Воскресенье, 2017-04-02, 19:23
Страна: (RU)
Kosten
 		Дата: Воскресенье, 2017-04-02, 19:31 | Сообщение 3
Администраторы
Сообщений:19249
Награды: 56
« 467 »


waak, вот от души, то тема уроки веб мастера второй админ сделал и так не развил.
Страна: (RU)
Kosten
 		Дата: Воскресенье, 2017-04-02, 20:19 | Сообщение 4
Администраторы
Сообщений:19249
Награды: 56
« 467 »


waak, поставил стили и что то не заметил изменение или так должно.



Сайт http://pluton.clan.su/
Прикрепления: 8274914.jpg(37.8 Kb)
Страна: (RU)
Kosten
 		Дата: Воскресенье, 2017-04-02, 20:21 | Сообщение 5
Администраторы
Сообщений:19249
Награды: 56
« 467 »


Просто думал, что в один материал будет и по идее должен быть.
Страна: (RU)
waak
 		Дата: Воскресенье, 2017-04-02, 20:26 | Сообщение 6
Друзья сайта
Сообщений:509
Награды: 13
« 124 »


Kosten, кеш почисти! или допустил ошибку при добавлении стилей
я проверил работу перед тем как скинуть
http://talantlev.ucoz.ru Скрипты от автора помощь по uCoz
Страна: (RU)
waak
 		Дата: Воскресенье, 2017-04-02, 20:51 | Сообщение 7
Друзья сайта
Сообщений:509
Награды: 13
« 124 »


Kosten, Тут ещё можт быт проблема в том что у тебя уже указаны свои параметры или параметры с !important и в этом случае тебе нужно ставить мои стили в самый конец и добавить им так же !important

Вот так
Код
@media screen and (max-width: 1000px) {.short-item {width: 30%!important;margin: 10px 1.5%!important;}}
@media screen and (max-width: 700px) {.short-item {width: 44%!important;margin: 10px 3%!important;}}
@media screen and (max-width: 500px) {.short-item {width: 94%!important;}}
http://talantlev.ucoz.ru Скрипты от автора помощь по uCoz
Страна: (RU)
Kosten
 		Дата: Воскресенье, 2017-04-02, 21:40 | Сообщение 8
Администраторы
Сообщений:19249
Награды: 56
« 467 »


waak, все получилось как нужно, и смотрится корректно, теперь материал полностью адаптированный под мобильные устройства.
Прикрепления: 7945280.png(130.1 Kb)
Страна: (RU)
Форум » Записки веб-разработчика » Уроки Веб-мастера » Сделать адаптивным вид материала файлов uCoz
  • Страница 1 из 1
  • 1
Поиск: