Правка Мобильной Версии Сайта
#1
Отправлено 06 Апрель 2016 - 11:13
Помогите пожалуйста.
Первая часть:
1. Не отображаются контакты магазина. Их нет ни в шапке, ни в подвале (вместо подвала отображается пустой прямоугольник)
2. Не отображается верхнее меню
3. В шапке отображается только строка поиска и корзина. Нет ни названия, ни логотипа, ни контактов
#2
Отправлено 06 Апрель 2016 - 11:30
Levchik (06 Апрель 2016 - 11:13) писал:
Помогите пожалуйста.
Первая часть:
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
Отправлено 06 Апрель 2016 - 11:55
Пункт 2. Не силен в разрешениях чтобы грамотно написать (( Но после правок на телефоне появилось меню в виде выпадающего списка, отображается нормально, установил значение 120.
Но на планшете так ничего и не отображается, размеры значений пробовал разные, влоть до 550.
Пункт 3. Полностью шапка в мобильной версии оказывается плохо смотрится. Изменения откатил обратно. Можно ли в имеющемся сейчас виде шапки убрать функцию поиска по сайту, а вместо него поставить название магазина и номер телефона?
#4
Отправлено 06 Апрель 2016 - 12:32
Levchik (06 Апрель 2016 - 11:55) писал:
Но на планшете так ничего и не отображается, размеры значений пробовал разные, влоть до 550.
Пункт 3. Полностью шапка в мобильной версии оказывается плохо смотрится. Изменения откатил обратно. Можно ли в имеющемся сейчас виде шапки убрать функцию поиска по сайту, а вместо него поставить название магазина и номер телефона?
2) Просто Вы изменяете это значения в отображении для мобильников, чтобы увеличить отступ для планшетных версий код:
.header_top { margin-top: 150px; }
нужно добавить после кода:
@media only screen and (min-width: 480px) and (max-width: 767px) {
и так же изменять 150px на нужно Вам значение, чтобы корректно отображалось.
3) Вот такое отображение шапки Вас устроит?
Если да, тогда Вам нужно будет произвести следующие изменения.
а) После кода:
@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
Отправлено 06 Апрель 2016 - 13:22
1. После правок не исчезло "Интернет-магазин". Как убрать эту надпись? Цель - сделать высоту шапки как можно меньше.
2. И после последних правок верхнее меню на планшете появилось, а на телефоне - исчезло ))
Может что я не так сделал...
3. Можно ли в шапке разместить надпись "Екатеринбург"? На полной версии сайта чтобы Екатеринбург отображался под надписью "Интернет-магазин", а в мобильной - под логотипом ЗООТЕКА
#6
Отправлено 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
Отправлено 06 Апрель 2016 - 19:36
RayLi (06 Апрель 2016 - 13:28) писал:
Вечер добрый!
1. После внесения изменений в мобильной версии "Интернет-магазин" исчезло и ширина шапки стала такой, как надо. Но вместе с этим и исчезла надпись "Интернет-магазин" в полной версии сайта. Как её вернуть?
2. вот это можно реализовать? Можно ли в шапке разместить надпись "Екатеринбург"? На полной версии сайта чтобы Екатеринбург отображался под надписью "Интернет-магазин", а в мобильной - под логотипом ЗООТЕКА
3. И в мобильной версии при увеличении масштаба просмотра, увеличивается и сама шапка, закрывая собой весь сайт. Как сделать, чтобы при увеличении масштаба просмотра, размер шапки не изменялся?
#8
Отправлено 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
Отправлено 07 Апрель 2016 - 11:26
Юля123 (07 Апрель 2016 - 10:48) писал:
Надпись вернулись и встали куда надо, спасибо!
Единственно, в полной версии сайта поднимите, пожалуйста, надпись Екатеринбург чуть выше, чтобы нижняя граница надписи была в один уровень с надписью "с 09:00 до 23:00".
Соответсвенно, после этого как понимаю, ширина шапки сузится? А то она стала частично перекрывать верхнее меню.
14.jpg
Юля123 (07 Апрель 2016 - 10:48) писал:
Увеличение разводящими движениями пальцами (надеюсь понятно написал ))) ). Т.е. это не лупа, а именно увеличение масштаба просмотра страницы. До начала внесения правок такой проблемы не было. Также, до правок шапка в мобильной версии при прокрутке страницы уходила вместе с текстом. А теперь она постоянно отображается. Надо чтобы шапка в мобильной версии снова уходила при прокрутке.
#10
Отправлено 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
Отправлено 07 Апрель 2016 - 13:01
В мобильной осталось только верхнее меню подтянуть к шапке.
А вот на планшете шапка не очень коректно отображается. И в вертикальном расположении шапка уходит вверх при прокрутке, а в горизонтальном - уходит только частично и фиксируется.
Можно поправить?
#12
Отправлено 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
Отправлено 07 Апрель 2016 - 14:20
Юля123 (07 Апрель 2016 - 14:03) писал:
Для планшетов мы не исправляли положение, опишите, пожалуйста, как блоки должны располагаться и я Вам помогу с расположением.
Чтобы проще было, давайте в вертикальном виде сделаем такое же расположение, как в версии для телефонов.
А в горизонтальной - пусть шапка вся отображается, как в полной версии.
Так можно?
#14
Отправлено 07 Апрель 2016 - 15:36
Levchik (07 Апрель 2016 - 14:20) писал:
А в горизонтальной - пусть шапка вся отображается, как в полной версии.
Так можно?
Произвела Вам изменения и создала бекап и до и после изменений, если Вам не понравятся эти изменения, то восстановите бекап за 07.04.2016 15:16:26
#16
Отправлено 14 Апрель 2016 - 00:08
#17
Отправлено 14 Апрель 2016 - 03:24
@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; }
Результат:
#18
Отправлено 14 Апрель 2016 - 16:12
Остались небольшие проблемы при просмотре сайта в разных браузерах, в хроме и эксплорере не всегда загружается слайдер и если слайдер не показывается, то не работают кнопки +/- для добавления количества товара. И в эксплорере переезжают вверху контакты, поиск корзина.
Благодарю за помощь.
#19
Отправлено 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
Отправлено 14 Апрель 2016 - 22:09
Просматриваю сайт с ноутбука 7-летней давности, но он вроде бы нормально работает, тормозит конечно, но не сильно))
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных