• Новые сообщения
  • Участники
  • Правила форума
  • Поиск
  • RSS
  • Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Сделать адаптивным вид материала файлов uCoz (Если вы хотите сделать адаптивный вид материалов на сайте)
Сделать адаптивным вид материала файлов uCoz
Kosten
 		Воскресенье, 02 Апреля 2017 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
« 555 »
Приветствую всех, может кто даст мастер класс или просто покажет, как сделать адаптивным вид материала в колонку, в котором нет не одной ссылки, только на переход и на изображение. На тестовом сайте ставил, по сути какая то адаптация есть, но реально должно идти в одну картинку, здесь же они просто сжиматься, хотя прокрутки в низу не наблюдается.

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



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



Код:



CSS:

Прикрепления: 1768234.jpg (60.8 Kb) · 5458510.jpg (55.4 Kb)
Страна: (RU)
waak
 		Воскресенье, 02 Апреля 2017 | Сообщение 2
Оффлайн
Заблокированные
Сообщений:588
Награды: 14
« 166 »
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%;}

чтоб она тоже растягивалась

Сообщение отредактировал
waak - Воскресенье, 02 Апреля 2017, 19:23
Страна: (RU)
Kosten
 		Воскресенье, 02 Апреля 2017 | Сообщение 3
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
« 555 »
waak, вот от души, то тема уроки веб мастера второй админ сделал и так не развил.
Страна: (RU)
Kosten
 		Воскресенье, 02 Апреля 2017 | Сообщение 4
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
« 555 »
waak, поставил стили и что то не заметил изменение или так должно.



Сайт http://pluton.clan.su/
Прикрепления: 8274914.jpg (37.8 Kb)
Страна: (RU)
Kosten
 		Воскресенье, 02 Апреля 2017 | Сообщение 5
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
« 555 »
Просто думал, что в один материал будет и по идее должен быть.
Страна: (RU)
waak
 		Воскресенье, 02 Апреля 2017 | Сообщение 6
Оффлайн
Заблокированные
Сообщений:588
Награды: 14
« 166 »
Kosten, кеш почисти! или допустил ошибку при добавлении стилей
я проверил работу перед тем как скинуть
Страна: (RU)
waak
 		Воскресенье, 02 Апреля 2017 | Сообщение 7
Оффлайн
Заблокированные
Сообщений:588
Награды: 14
« 166 »
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;}}
Страна: (RU)
Kosten
 		Воскресенье, 02 Апреля 2017 | Сообщение 8
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
« 555 »
waak, все получилось как нужно, и смотрится корректно, теперь материал полностью адаптированный под мобильные устройства.
Прикрепления: 7945280.png (130.1 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Сделать адаптивным вид материала файлов uCoz (Если вы хотите сделать адаптивный вид материалов на сайте)
  • Страница 1 из 1
  • 1
Поиск: