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


Правка Мобильной Версии Сайта


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

#1 Levchik

Levchik

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

  • Пользователи
  • PipPipPip
  • 199 сообщений

Отправлено 06 Апрель 2016 - 11:13

Мобильная версия сайта www.zooteka96.ru отображается с большим количеством ошибок ((
Помогите пожалуйста.

Первая часть:

1. Не отображаются контакты магазина. Их нет ни в шапке, ни в подвале (вместо подвала отображается пустой прямоугольник)
2. Не отображается верхнее меню
3. В шапке отображается только строка поиска и корзина. Нет ни названия, ни логотипа, ни контактов

#2 Юля123

Юля123

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

  • Пользователи
  • PipPipPipPip
  • 2 567 сообщений

Отправлено 06 Апрель 2016 - 11:30

Просмотр сообщенияLevchik (06 Апрель 2016 - 11:13) писал:

Мобильная версия сайта www.zooteka96.ru отображается с большим количеством ошибок ((
Помогите пожалуйста.

Первая часть:

1. Не отображаются контакты магазина. Их нет ни в шапке, ни в подвале (вместо подвала отображается пустой прямоугольник)
2. Не отображается верхнее меню
3. В шапке отображается только строка поиска и корзина. Нет ни названия, ни логотипа, ни контактов

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

1) Давайте определимся, где должны отображаться контакты?

а) Чтобы отображались все блоки в футере найдите в Mian.css код:

  #footer .one_fourth {display: none;}

встречается два раза, первый для разрешений от 480 до 767 ( 824 строка), второй меньше 480 (877 строка). Если хотите, чтобы футер отображался, то нужно этот код удалить.

б) Для контактов в шапке. Там же найдите код:

  #header #support {display:none;}

тоже встречается 2 раза на тех же разрешениях, чтобы контакты отразились, код нужно удалить.

2) Чтобы отображалось верхнее меню, нужно в main.css  после кода:

@media only screen and (max-width: 480px) {

добавить код:

.header_top {
	margin-top: 150px;
}


значение 150 нужно будет увеличить, если вы хотите отображаться контакты в шапке, иначе меню опять будет скрыто под шапку.

3) В Main.css найдите код:

Цитата

  #header #welcome {display: none;}

так же встречается 2 раза, при тех же разрешениях, чтобы отображался логотип и название, это  код нужно удалить.

Перед изменениями не забывайте делать бекап шаблона.

#3 Levchik

Levchik

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

  • Пользователи
  • PipPipPip
  • 199 сообщений

Отправлено 06 Апрель 2016 - 11:55

по пункту 1 все отлично!

Пункт 2. Не силен в разрешениях чтобы грамотно написать (( Но после правок на телефоне появилось меню в виде выпадающего списка, отображается нормально, установил значение 120.
Но на планшете так ничего и не отображается, размеры значений пробовал разные, влоть до 550.

Пункт 3. Полностью шапка в мобильной версии оказывается плохо смотрится. Изменения откатил обратно. Можно ли в имеющемся сейчас виде шапки убрать функцию поиска по сайту, а вместо него поставить название магазина и номер телефона?

#4 Юля123

Юля123

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

  • Пользователи
  • PipPipPipPip
  • 2 567 сообщений

Отправлено 06 Апрель 2016 - 12:32

Просмотр сообщенияLevchik (06 Апрель 2016 - 11:55) писал:

Пункт 2. Не силен в разрешениях чтобы грамотно написать (( Но после правок на телефоне появилось меню в виде выпадающего списка, отображается нормально, установил значение 120.
Но на планшете так ничего и не отображается, размеры значений пробовал разные, влоть до 550.

Пункт 3. Полностью шапка в мобильной версии оказывается плохо смотрится. Изменения откатил обратно. Можно ли в имеющемся сейчас виде шапки убрать функцию поиска по сайту, а вместо него поставить название магазина и номер телефона?

2) Просто Вы изменяете это значения в отображении для мобильников, чтобы увеличить отступ для планшетных версий код:

.header_top {
	 margin-top: 150px;
}

нужно добавить после кода:

@media only screen and (min-width: 480px) and (max-width: 767px) {

и так же изменять 150px на нужно Вам значение, чтобы корректно отображалось.

3) Вот такое отображение шапки Вас устроит?

QIP Shot - Screen 253.png

Если да, тогда Вам нужно будет произвести следующие изменения.

а) После кода:

@media screen and (max-width: 785px) {
 



добавьте код:

	#header #welcome span {display:none;}
	#header #welcome a {
	width: 48%;
	float: left;
}
#header #support {
	width: 50%;
	margin-right: 0;
	top:0;
}
#header #search {
	display: none;
}

и на строке 816 и 859 удалите код:

#header #support {display:none;}


далее на строке 813 и 856 удалите код:

#header #welcome {display: none;}

значение отступа нужно будет увеличить и на разрешении 480 и от 480 до 767.

#5 Levchik

Levchik

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

  • Пользователи
  • PipPipPip
  • 199 сообщений

Отправлено 06 Апрель 2016 - 13:22

Шапка, да, устроит.

1. После правок не исчезло "Интернет-магазин". Как убрать эту надпись? Цель - сделать высоту шапки как можно меньше.

2. И после последних правок верхнее меню на планшете появилось, а на телефоне - исчезло ))

Может что я не так сделал...

3. Можно ли в шапке разместить надпись "Екатеринбург"? На полной версии сайта чтобы Екатеринбург отображался под надписью "Интернет-магазин", а в мобильной - под логотипом ЗООТЕКА

#6 RayLi

RayLi

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

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

Отправлено 06 Апрель 2016 - 13:28

Просмотр сообщенияLevchik (06 Апрель 2016 - 13:22) писал:

Шапка, да, устроит.

1. После правок не исчезло "Интернет-магазин". Как убрать эту надпись? Цель - сделать высоту шапки как можно меньше.

2. И после последних правок верхнее меню на планшете появилось, а на телефоне - исчезло ))

Может что я не так сделал...

3. Можно ли в шапке разместить надпись "Екатеринбург"? На полной версии сайта чтобы Екатеринбург отображался под надписью "Интернет-магазин", а в мобильной - под логотипом ЗООТЕКА

Здравствуйте.
Если я вас правильно понял, то вам необходимо сделать следующее:
В шаблоне html найдите данный код:

			<div id="welcome"><a href="http://{NET_DOMAIN}/"><img src="http://st.zooteka96.ru/8/1680/341/logo.png"></a><span style="float:right;padding-top: 24px;">интернет-магазин</span></div>

И замените его вот этим вот кодом:

			<div id="welcome"><a href="http://{NET_DOMAIN}/"><img src="http://st.zooteka96.ru/8/1680/341/logo.png"></a><span style="float:right;padding-top: 24px;"></span></div>


#7 Levchik

Levchik

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

  • Пользователи
  • PipPipPip
  • 199 сообщений

Отправлено 06 Апрель 2016 - 19:36

Просмотр сообщенияRayLi (06 Апрель 2016 - 13:28) писал:

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

Вечер добрый!
1. После внесения изменений в мобильной версии "Интернет-магазин" исчезло и ширина шапки стала такой, как надо. Но вместе с этим и исчезла надпись "Интернет-магазин" в полной версии сайта. Как её вернуть?

2. вот это можно реализовать? Можно ли в шапке разместить надпись "Екатеринбург"? На полной версии сайта чтобы Екатеринбург отображался под надписью "Интернет-магазин", а в мобильной - под логотипом ЗООТЕКА
3. И в мобильной версии при увеличении масштаба просмотра, увеличивается и сама шапка, закрывая собой весь сайт. Как сделать, чтобы при увеличении масштаба просмотра, размер шапки не изменялся?
13.jpg

#8 Юля123

Юля123

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

  • Пользователи
  • PipPipPipPip
  • 2 567 сообщений

Отправлено 07 Апрель 2016 - 10:48

Просмотр сообщенияLevchik (06 Апрель 2016 - 19:36) писал:

Вечер добрый!
1. После внесения изменений в мобильной версии "Интернет-магазин" исчезло и ширина шапки стала такой, как надо. Но вместе с этим и исчезла надпись "Интернет-магазин" в полной версии сайта. Как её вернуть?

2. вот это можно реализовать? Можно ли в шапке разместить надпись "Екатеринбург"? На полной версии сайта чтобы Екатеринбург отображался под надписью "Интернет-магазин", а в мобильной - под логотипом ЗООТЕКА
3. И в мобильной версии при увеличении масштаба просмотра, увеличивается и сама шапка, закрывая собой весь сайт. Как сделать, чтобы при увеличении масштаба просмотра, размер шапки не изменялся?
Прикрепленный файл 13.jpg


Здравствуйте, видимо, Вас модератор неправильно понял, эту надпись просто удалили. В шаблоне HTML код:

<div id="welcome"><a href="http://{NET_DOMAIN}/"><img src="http://st.zooteka96.ru/8/1680/341/logo.png"></a><span style="float:right;padding-top: 24px;"></span></div>

замените на код:

<div id="welcome"><a href="http://{NET_DOMAIN}/"><img src="http://st.zooteka96.ru/8/1680/341/logo.png"></a><span style="float:right;padding-top: 24px;">интернет-магазин</span><p style="font-size:14px;float:right;">г.Екатеринбург</p></div>

В main.css после кода:
@media screen and (max-width: 785px) {

добавьте код:
#header #welcome span {
	display: none;
}

Так же найдите код:

  #header #cart{ width: 98%; min-width: 98%;float: none;margin-bottom: 10px;}

и замените его на код:

  #header #cart{ width: 100%; min-width: 98%;float: none;margin-bottom: 10px;}

3) Если я Вас правильно понимаю, то речь ведется о увеличении с помощью двойного таба по экрану и другими подобным способами, если так, то к сожалению, на эту функцию мы никак повлиять не сможем, т.к. это работает как лупа. Если Вы не так увеличиваете просмотр, то уточните, о чем речь.

#9 Levchik

Levchik

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

  • Пользователи
  • PipPipPip
  • 199 сообщений

Отправлено 07 Апрель 2016 - 11:26

Просмотр сообщенияЮля123 (07 Апрель 2016 - 10:48) писал:


Надпись вернулись и встали куда надо, спасибо!

Единственно, в полной версии сайта поднимите, пожалуйста, надпись Екатеринбург чуть выше, чтобы нижняя граница надписи была в один уровень с надписью "с 09:00 до 23:00".
Соответсвенно, после этого как понимаю, ширина шапки сузится?  А то она стала частично перекрывать верхнее меню.

Прикрепленный файл 14.jpg


Просмотр сообщенияЮля123 (07 Апрель 2016 - 10:48) писал:

3) Если я Вас правильно понимаю, то речь ведется о увеличении с помощью двойного таба по экрану и другими подобным способами, если так, то к сожалению, на эту функцию мы никак повлиять не сможем, т.к. это работает как лупа. Если Вы не так увеличиваете просмотр, то уточните, о чем речь.

Увеличение разводящими движениями пальцами (надеюсь понятно написал ))) ). Т.е. это не лупа, а именно увеличение масштаба просмотра страницы. До начала внесения правок такой проблемы не было. Также, до правок шапка в мобильной версии при прокрутке страницы уходила вместе с текстом. А теперь она постоянно отображается. Надо чтобы шапка в мобильной версии снова уходила при прокрутке.

Прикрепленные изображения

  • 14.jpg


#10 Юля123

Юля123

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

  • Пользователи
  • PipPipPipPip
  • 2 567 сообщений

Отправлено 07 Апрель 2016 - 11:52

Просмотр сообщенияLevchik (07 Апрель 2016 - 11:26) писал:

Надпись вернулись и встали куда надо, спасибо!

Единственно, в полной версии сайта поднимите, пожалуйста, надпись Екатеринбург чуть выше, чтобы нижняя граница надписи была в один уровень с надписью "с 09:00 до 23:00".
Соответсвенно, после этого как понимаю, ширина шапки сузится?  А то она стала частично перекрывать верхнее меню.

Прикрепленный файл 14.jpg




Увеличение разводящими движениями пальцами (надеюсь понятно написал ))) ). Т.е. это не лупа, а именно увеличение масштаба просмотра страницы. До начала внесения правок такой проблемы не было. Также, до правок шапка в мобильной версии при прокрутке страницы уходила вместе с текстом. А теперь она постоянно отображается. Надо чтобы шапка в мобильной версии снова уходила при прокрутке.

В конце main,css добавьте код:

#header #welcome p {
	margin-top: -10px;
}


Шапка у Вас фиксированная, потому что у Вас прописано свойство для фиксации шапки. Чтобы в мобильной версии такого не было, после кода:

@media screen and (max-width: 785px) {


добавьте код:
  #header_colapse{position:relative;}


и код:
  .header_top {
		 margin-top: 180px;
}

замените на код:
.header_top{margin-top:0px;}


#11 Levchik

Levchik

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

  • Пользователи
  • PipPipPip
  • 199 сообщений

Отправлено 07 Апрель 2016 - 13:01

В полной версии всё отлично!

В мобильной осталось только верхнее меню подтянуть к шапке.

15.jpg

А вот на планшете шапка не очень коректно отображается. И в вертикальном расположении шапка уходит вверх при прокрутке, а в горизонтальном - уходит только частично и фиксируется.
Можно поправить?

16.jpg    17.jpg

#12 Юля123

Юля123

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

  • Пользователи
  • PipPipPipPip
  • 2 567 сообщений

Отправлено 07 Апрель 2016 - 14:03

Просмотр сообщенияLevchik (07 Апрель 2016 - 13:01) писал:

В полной версии всё отлично!

В мобильной осталось только верхнее меню подтянуть к шапке.

Прикрепленный файл 15.jpg

А вот на планшете шапка не очень корректно отображается. И в вертикальном расположении шапка уходит вверх при прокрутке, а в горизонтальном - уходит только частично и фиксируется.
Можно поправить?

Прикрепленный файл 16.jpg   Прикрепленный файл 17.jpg

В main.css найдите код:
  .header_top {
		margin-top: 120px;
}

и замените на код:
  .header_top {
		margin-top: 0px;
}

Для планшетов мы не исправляли положение, опишите, пожалуйста, как блоки должны располагаться и я Вам помогу с расположением.


Чтобы в горизонтальном просмотре шапка так же не фиксировалась добавьте код:

#header_colapse{position:relative;}

после кода:

@media only screen and (min-width: 557px) and (max-width: 898px) {

а так же после кода:

@media only screen and (min-width: 768px) and (max-width: 980px) {


#13 Levchik

Levchik

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

  • Пользователи
  • PipPipPip
  • 199 сообщений

Отправлено 07 Апрель 2016 - 14:20

Просмотр сообщенияЮля123 (07 Апрель 2016 - 14:03) писал:


Для планшетов мы не исправляли положение, опишите, пожалуйста, как блоки должны располагаться и я Вам помогу с расположением.


Чтобы проще было, давайте в вертикальном виде сделаем такое же расположение, как в версии для телефонов.
А в горизонтальной - пусть шапка вся отображается, как в полной версии.
Так можно?

#14 Юля123

Юля123

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

  • Пользователи
  • PipPipPipPip
  • 2 567 сообщений

Отправлено 07 Апрель 2016 - 15:36

Просмотр сообщенияLevchik (07 Апрель 2016 - 14:20) писал:

Чтобы проще было, давайте в вертикальном виде сделаем такое же расположение, как в версии для телефонов.
А в горизонтальной - пусть шапка вся отображается, как в полной версии.
Так можно?

Произвела Вам изменения и создала бекап  и до и после изменений, если Вам не понравятся эти изменения, то восстановите бекап за 07.04.2016 15:16:26

#15 Levchik

Levchik

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

  • Пользователи
  • PipPipPip
  • 199 сообщений

Отправлено 07 Апрель 2016 - 20:15

Просмотр сообщенияЮля123 (07 Апрель 2016 - 15:36) писал:

Произвела Вам изменения и создала бекап  и до и после изменений, если Вам не понравятся эти изменения, то восстановите бекап за 07.04.2016 15:16:26

Спасибо большое, все работает!
Очень качественно, а главное - быстро помогли!

#16 loveni

loveni

    Новичок

  • Пользователи
  • Pip
  • 3 сообщений

Отправлено 14 Апрель 2016 - 00:08

Здравствуйте! Помогите, пожалуйста, с адаптивностью сайта и с работой скриптов и слайдера. Сайт tkani-loveni.ru на мобильном отображается некорректно, переезжают контакты, каталог товаров располагается под надписью Добро пожаловать (на скрине видно как выглядит). Еще в не всегда работает скрипт добавления в корзину товара по 0,1 м, кнопки +/- просто не нажимаются и слайдер не отображается (это при просмотре в гугл хроме, в мозиле почти всегда нормально, но тоже периодически пишет что есть ошибка на сайте). Подскажите, пожалуйста, что нужно исправить.
Screenshot_2016-04-13-14-41-22.jpg

#17 Vaccina

Vaccina

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

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

Отправлено 14 Апрель 2016 - 03:24

Все последующие изменения будут производиться в файле main.css после строки:
@media only screen and (max-width: 480px) {

Найдите:
#header #support {
clear: both;
}

замените на:
#header #support {
clear: both;
margin-right: 5px;
top: initial;
}

далее найдите:
#header #logo {
margin: 0;
}

замените на:
#header #logo {
margin: 0 auto;
float: none;
text-align: center;
}

далее найдите:
#header #search {
position: relative;
clear: both;
width: 100%;
margin-bottom: 10px;
}

замените на:
#header #search {
position: relative;
clear: both;
width: 100%;
margin-bottom: 10px;
float: none;
margin: 0 auto;
}

далее найдите:
#header #cart .heading {
padding: 0 0 0 46px;
}

замените на:
#header #cart .heading {
padding: 0 0 0 46px;
margin: 0;
}
#content .heading_title span {
position: relative;
display: block;
}

Результат:
123.jpg

#18 loveni

loveni

    Новичок

  • Пользователи
  • Pip
  • 3 сообщений

Отправлено 14 Апрель 2016 - 16:12

Спасибо огромное, мобильная версия теперь работает отлично!

Остались небольшие проблемы при просмотре сайта в разных браузерах, в хроме и эксплорере не всегда загружается слайдер и если слайдер не показывается, то не работают кнопки +/- для добавления количества товара. И в эксплорере переезжают вверху контакты, поиск корзина.
Благодарю за помощь.

Прикрепленные изображения

  • скрин хром.jpg
  • скрин эксплорер без слайдера.jpg
  • скрин эксплорер.jpg


#19 Юля123

Юля123

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

  • Пользователи
  • PipPipPipPip
  • 2 567 сообщений

Отправлено 14 Апрель 2016 - 17:45

Просмотр сообщенияloveni (14 Апрель 2016 - 16:12) писал:

Спасибо огромное, мобильная версия теперь работает отлично!

Остались небольшие проблемы при просмотре сайта в разных браузерах, в хроме и эксплорере не всегда загружается слайдер и если слайдер не показывается, то не работают кнопки +/- для добавления количества товара. И в эксплорере переезжают вверху контакты, поиск корзина.
Благодарю за помощь.

Здравствуйте, первая проблема возникает из-за того, что у Вас не загрузились скрипты. Это может возникнуть  скорее всего при медленном соединении с интернетом, а так же при просмотре на маломощном устройстве. Повлиять на это не представляется возможным. Уточните, пожалуйста, с какого устройства Вы просматриваете сайт и не было ли у Вас перебоев с интернетом.


Для решения вnорой проблемы в main.css найдите код:

#header #cart {z-index: 20;min-width: 300px;top:3px;right:20px;background:none;repeat scroll 0 0 rgba(0, 0, 0, 0);}

и замените на код:
#header #cart {z-index: 20;min-width: 300px;max-width: 500px;top:3px;right:20px;background:none;repeat scroll 0 0 rgba(0, 0, 0, 0);}


#20 loveni

loveni

    Новичок

  • Пользователи
  • Pip
  • 3 сообщений

Отправлено 14 Апрель 2016 - 22:09

Благодарю, все выровнялось, стало хорошо!
Просматриваю сайт с ноутбука 7-летней давности, но он вроде бы нормально работает, тормозит конечно, но не сильно))




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

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