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


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

дизайн

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

#1 titov_andrei

titov_andrei

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

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

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

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

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

#2 MikDark

MikDark

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

  • Модераторы
  • 6 146 сообщений

Отправлено 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 471 сообщений

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

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

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

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

#5 titov_andrei

titov_andrei

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

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

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

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

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

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

Изображение

#6 Firefly

Firefly

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

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

Отправлено 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
  • 20 сообщений
  • ГородКалуга

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

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

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

Спасибо.

#8 Danil

Danil

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

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

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

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

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

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

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

#9 titov_andrei

titov_andrei

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

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

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

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

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

Изображение

#10 Danil

Danil

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

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

Отправлено 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
  • 20 сообщений
  • ГородКалуга

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

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

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

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

#12 Danil

Danil

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

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

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

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

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

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

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

#13 titov_andrei

titov_andrei

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

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

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

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

#14 Firefly

Firefly

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

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

Отправлено 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;}


#15 titov_andrei

titov_andrei

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

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

Отправлено 02 Июнь 2017 - 21:47

На странице http://go-lova.ru/page/kachestvo - при просмотре с телефона правая граница текста и баннера не имеют отступа от края.

Нужно поправить.

#16 Vaccina

Vaccina

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

  • Модераторы
  • 22 289 сообщений

Отправлено 03 Июнь 2017 - 07:48

Здравствуйте.

Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:
@media all and (max-width: 481px) {

после него пропишите:
.htmlDataBlock td {
	display: block;
	width: 320px !important;
	word-wrap: break-word;
}


#17 titov_andrei

titov_andrei

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

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

Отправлено 06 Июнь 2017 - 13:34

Изображение

http://go-lova.ru/page/otzyvy - текст выходит за правую границу

#18 Mr.Nito

Mr.Nito

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

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

Отправлено 06 Июнь 2017 - 14:07

Просмотр сообщенияtitov_andrei (06 Июнь 2017 - 13:34) писал:

http://go-lova.ru/page/otzyvy - текст выходит за правую границу
Здравствуйте.
В редактировании страницы замените через кнопку источник в самом начале код:
<style type="text/css">@media screen and (max-width: 767px) {
.divtbl{width:100%}
}
</style>
на

<style type="text/css">@media screen and (max-width: 767px) {
.divtbl{width:100%!important;}
}
</style>


#19 titov_andrei

titov_andrei

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

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

Отправлено 07 Июнь 2017 - 21:35

Просмотр сообщенияMr.Nito (06 Июнь 2017 - 14:07) писал:

Здравствуйте.
В редактировании страницы замените через кнопку источник в самом начале код:
<style type="text/css">@media screen and (max-width: 767px) {
.divtbl{width:100%}
}
</style>
на

<style type="text/css">@media screen and (max-width: 767px) {
.divtbl{width:100%!important;}
}
</style>

Уточните - в каком файле нужно делать изменения?

#20 Vaccina

Vaccina

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

  • Модераторы
  • 22 289 сообщений

Отправлено 09 Июнь 2017 - 08:31

Здравствуйте.

В разделе Сайт - Страницы - в описании данной страницы нажмите "Источник" и измените код по инструкции выше.

Можно также добавить вместо этого в разделе Сайт - Редактор шаблонов - main.css найти:
.htmlDataBlock td {
	 display: block;
	 width: 320px !important;
	 word-wrap: break-word;
}

после него прописать:
.htmlDataBlock div{width: 100% !important;}






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

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

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