• Новые сообщения
  • Участники
  • Правила форума
  • Поиск
  • RSS
Страница 1 из 11
Форум про uCoz » Все для вебмастера » Уроки Веб-мастера » Сделать адаптивным вид материала файлов uCoz
Сделать адаптивным вид материала файлов uCoz
Kosten
 		Дата: Воскресенье, 02.04.2017, 00:58 | Сообщение # 1
Администраторы
Сообщений:14689
Награды: 47
« 390 »


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

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



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



Код:



CSS:

Прикрепления: 1768234.jpg(61Kb) · 5458510.jpg(55Kb)
Страна: (RU)
waak
 		Дата: Воскресенье, 02.04.2017, 19:20 | Сообщение # 2
Vip
Сообщений:283
Награды: 7
« 74 »


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%;}

чтоб она тоже растягивалась
Буду благодарен за любую финансовую поддержку!
Яндекс 41001566705372
Вебмани R234675901433
Киви 79094024545

Сообщение отредактировал
waak - Воскресенье, 02.04.2017, 19:23
Страна: (RU)
Kosten
 		Дата: Воскресенье, 02.04.2017, 19:31 | Сообщение # 3
Администраторы
Сообщений:14689
Награды: 47
« 390 »


waak, вот от души, то тема уроки веб мастера второй админ сделал и так не развил.
Страна: (RU)
Kosten
 		Дата: Воскресенье, 02.04.2017, 20:19 | Сообщение # 4
Администраторы
Сообщений:14689
Награды: 47
« 390 »


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



Сайт http://pluton.clan.su/
Прикрепления: 8274914.jpg(38Kb)
Страна: (RU)
Kosten
 		Дата: Воскресенье, 02.04.2017, 20:21 | Сообщение # 5
Администраторы
Сообщений:14689
Награды: 47
« 390 »


Просто думал, что в один материал будет и по идее должен быть.
Страна: (RU)
waak
 		Дата: Воскресенье, 02.04.2017, 20:26 | Сообщение # 6
Vip
Сообщений:283
Награды: 7
« 74 »


Kosten, кеш почисти! или допустил ошибку при добавлении стилей
я проверил работу перед тем как скинуть
Буду благодарен за любую финансовую поддержку!
Яндекс 41001566705372
Вебмани R234675901433
Киви 79094024545
Страна: (RU)
waak
 		Дата: Воскресенье, 02.04.2017, 20:51 | Сообщение # 7
Vip
Сообщений:283
Награды: 7
« 74 »


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;}}
Буду благодарен за любую финансовую поддержку!
Яндекс 41001566705372
Вебмани R234675901433
Киви 79094024545
Страна: (RU)
Kosten
 		Дата: Воскресенье, 02.04.2017, 21:40 | Сообщение # 8
Администраторы
Сообщений:14689
Награды: 47
« 390 »


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