Перейти к содержимому


Адаптивный Дизайн

дизайн

  • Авторизуйтесь для ответа в теме
Сообщений в теме: 13

#1 titov_andrei

titov_andrei

    Пользователь

  • Пользователи
  • PipPip
  • 16 сообщений
  • ГородКалуга

Отправлено 28 Апрель 2017 - 10:03

Сайт http://go-lova.ru/

Что можно улучшить для мобильной версии?

#2 MikDark

MikDark

    Активный участник

  • Модераторы
  • 5 964 сообщений

Отправлено 28 Апрель 2017 - 11:49

Просмотр сообщенияtitov_andrei (28 Апрель 2017 - 10:03) писал:

Сайт http://go-lova.ru/

Что можно улучшить для мобильной версии?

Здравствуйте. А что именно Вам там не нравится?

#3 Сергей Иванович

Сергей Иванович

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 86 сообщений
  • ГородЕкатеринбург

Отправлено 29 Апрель 2017 - 06:48

Желательно адаптировать для экранов шириной 500 - 320 пиксел.
А в остальном всё нормально смотрится.

#4 Firefly

Firefly

    Активный участник

  • Модераторы
  • 3 156 сообщений

Отправлено 30 Апрель 2017 - 13:51

Просмотр сообщенияСергей Иванович (29 Апрель 2017 - 06:48) писал:

Желательно адаптировать для экранов шириной 500 - 320 пиксел.
А в остальном всё нормально смотрится.

Здравствуйте.
Создал бэкап и отрегулировал адаптивность для элементов иконок шапки на разрешении до 641px. Так же добавил скрытие надписи Обратный звонок на малых разрешениях, чтобы все помещалось.
Проверьте, пожалуйста, результат.

#5 titov_andrei

titov_andrei

    Пользователь

  • Пользователи
  • PipPip
  • 16 сообщений
  • ГородКалуга

Отправлено 12 Май 2017 - 18:01

Посоветуйте, как оформить вид с навигационной панелью полупрозрачной?

Она закрывает изображение.

Сделать её лучше прозрачной, сместить картинку вниз или вообще как то изменить вид?

Изображение

#6 Firefly

Firefly

    Активный участник

  • Модераторы
  • 3 156 сообщений

Отправлено 12 Май 2017 - 20:07

Просмотр сообщенияtitov_andrei (12 Май 2017 - 18:01) писал:

Посоветуйте, как оформить вид с навигационной панелью полупрозрачной?

Она закрывает изображение.

Сделать её лучше прозрачной, сместить картинку вниз или вообще как то изменить вид?

Изображение

Здравствуйте.
Как вариант можно сделать полоску более прозрачной, для этого в шаблоне main.css найдите код:

.header-middle.index {background: rgba(255,255,255,0.55) none repeat scroll 0 0;display: block;z-index: 11;border: 0;height: 96px;}

Замените на:

.header-middle.index {background: rgba(255,255,255,0.15) none repeat scroll 0 0;display: block;z-index: 11;border: 0;height: 96px;}



#7 titov_andrei

titov_andrei

    Пользователь

  • Пользователи
  • PipPip
  • 16 сообщений
  • ГородКалуга

Отправлено 18 Май 2017 - 13:57

Да, спасибо. Прозрачность достаточная.

Ещё подскажите - как чуть поднять кнопку "сендвич-меню" и поиска и наверно их нужно на одинаковой высоте сделать и одинаковых размеров.

Спасибо.

#8 Danil

Danil

    Активный участник

  • Модераторы
  • 4 495 сообщений

Отправлено 18 Май 2017 - 20:15

Просмотр сообщенияtitov_andrei (18 Май 2017 - 13:57) писал:

Да, спасибо. Прозрачность достаточная.

Ещё подскажите - как чуть поднять кнопку "сендвич-меню" и поиска и наверно их нужно на одинаковой высоте сделать и одинаковых размеров.

Спасибо.
Здравствуйте.
Изменения Вам произвел, проверьте, пожалуйста.

#9 titov_andrei

titov_andrei

    Пользователь

  • Пользователи
  • PipPip
  • 16 сообщений
  • ГородКалуга

Отправлено 23 Май 2017 - 11:43

Да, всё нормально. Спасибо.

Ещё нужно настроить параметры изображения (оно вытягивается) на этой странице - http://go-lova.ru/page/Moya-istoriya

Изображение

#10 Danil

Danil

    Активный участник

  • Модераторы
  • 4 495 сообщений

Отправлено 23 Май 2017 - 12:58

Просмотр сообщенияtitov_andrei (23 Май 2017 - 11:43) писал:

Да, всё нормально. Спасибо.

Ещё нужно настроить параметры изображения (оно вытягивается) на этой странице - http://go-lova.ru/page/Moya-istoriya

Изображение
Здравствуйте.
В конец main.css добавьте код
.htmlDataBlock img {height: auto !important;}


#11 titov_andrei

titov_andrei

    Пользователь

  • Пользователи
  • PipPip
  • 16 сообщений
  • ГородКалуга

Отправлено 26 Май 2017 - 16:18

В мобильном меню нужно поменять надпись в пункте "Каталог:Головные уборы" на просто "Каталог".

В каком месте нужно подправить код?

И как можно поменять иконку крестика, для раскрытия меню на стрелочку?

#12 Danil

Danil

    Активный участник

  • Модераторы
  • 4 495 сообщений

Отправлено 26 Май 2017 - 16:46

Просмотр сообщенияtitov_andrei (26 Май 2017 - 16:18) писал:

В мобильном меню нужно поменять надпись в пункте "Каталог:Головные уборы" на просто "Каталог".

В каком месте нужно подправить код?

И как можно поменять иконку крестика, для раскрытия меню на стрелочку?
Здравствуйте.
Изменения с названием категории произвел, проверьте, пожалуйста.
Что касается стрелочек, то выберите их на сайте http://fontawesome.io/icons/, а после пришлите названия понравившихся стрелочек.

#13 titov_andrei

titov_andrei

    Пользователь

  • Пользователи
  • PipPip
  • 16 сообщений
  • ГородКалуга

Отправлено 28 Май 2017 - 11:23

http://fontawesome.i.../chevron-right/ - такая стрелочка для меню

#14 Firefly

Firefly

    Активный участник

  • Модераторы
  • 3 156 сообщений

Отправлено 28 Май 2017 - 12:12

Просмотр сообщенияtitov_andrei (28 Май 2017 - 11:23) писал:

http://fontawesome.i.../chevron-right/ - такая стрелочка для меню

Здравствуйте.
В шаблоне main.css код:
#mommenu #menu_offcanvas .mainnav li a .open-menu:before {content: "\f067";font-family: 'FontAwesome';font-size: 14px;float:right;}
#mommenu #menu_offcanvas .mainnav li.active a .open-menu.active:before {content: "\f068";color: #707070;}

Заменил на:
#mommenu #menu_offcanvas .mainnav li a .open-menu:before {content: "\f054";font-family: 'FontAwesome';font-size: 14px;float:right;}
#mommenu #menu_offcanvas .mainnav li.active a .open-menu.active:before {content: "\f078";color: #707070;}






Темы с аналогичным тегами дизайн

Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных