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


Мобильная Версия


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

#1 Mari-ina

Mari-ina

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

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

Отправлено 11 Июль 2016 - 11:39

Здравствуйте. Помогите подправить мобильную версию сайта.
1. Для расширения 1024 убрать картинки по краям, оставить только баннер
2. От 800 и менее вообще полностью убрать баннер и картинки по краям.
3. При расширении 1024 телефон. поиск и последние значки уходят под синюю строку меню, надо вернуть все в одну строку
4. При расширении 800 и 768 значок Каталога поднять в верхнюю строку меню, рядом с Флажком (поменять цвет флажка на белый)
5. При расширении 600 и 533 Флажок, каталог, телефон и значки корзины, сравнения и избранного поместить в одну строку синего меню, а поиск оставить где сейчас находится под этой строкой, только по центру.
6. Для более маленьких расширений в строке меню оставить только флажок, каталог и значки корзины

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

  • 120.png
  • 121.png
  • 122.png
  • 123.png


#2 Ирина345

Ирина345

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

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

Отправлено 12 Июль 2016 - 13:31

Просмотр сообщенияMari-ina (11 Июль 2016 - 11:39) писал:

Здравствуйте. Помогите подправить мобильную версию сайта.
1. Для расширения 1024 убрать картинки по краям, оставить только баннер
2. От 800 и менее вообще полностью убрать баннер и картинки по краям.
3. При расширении 1024 телефон. поиск и последние значки уходят под синюю строку меню, надо вернуть все в одну строку
4. При расширении 800 и 768 значок Каталога поднять в верхнюю строку меню, рядом с Флажком (поменять цвет флажка на белый)
5. При расширении 600 и 533 Флажок, каталог, телефон и значки корзины, сравнения и избранного поместить в одну строку синего меню, а поиск оставить где сейчас находится под этой строкой, только по центру.
6. Для более маленьких расширений в строке меню оставить только флажок, каталог и значки корзины
Здравствуйте,
1,3 Найдите в файле main.css
@media all and (max-width: 991px) {

замените на
@media all and (max-width: 1024px) {
.banner_set> a img {
	display: none;
}
#header-top .header-col-left {
	width: 40%;
}
}
@media all and (max-width: 991px) {

2. Найдите в файле main.css
@media all and (max-width: 767px) {
после вставьте
.banner_set {
	display: none;
}

4. Найдите в шаблоне HTML
	  <div id="mommenu" class="menu-offcanvas">
			  <span class="btn-navbar"> <i class="fa fa-align-justify"></i> <span class="overlay"></span></span>
			  <div id="menu_offcanvas" class="offcanvas">
				<div class="canvas-title">
				  <i class="fa fa-bars"></i>
				  <span class="title">Каталог</span>
				  <i class="fa fa-times"></i>
				</div>
				<ul class="mainnav">
				{% IFNOT catalog_full_empty %}
				  {% FOR catalog_full %}
					{% IF catalog_full.FIRST %}{% IFNOT catalog_full.LEVEL = 0 %}<ul class="sub">{% ENDIF %}{% ENDIF %}
					  <li class="level{catalog_full.LEVEL} {% IF catalog_full.ISSET_SUB %}parent{% ENDIF %} {% IF catalog_full.LEVEL = 0 %}subhead{% ENDIF %} {% IF catalog_full.CURRENT || catalog_full.CURRENT_PARENT %}active{% ENDIF %}">
						<a href="{catalog_full.URL}" class="title-lv{catalog_full.LEVEL} {% IF catalog_full.CURRENT %}active{% ENDIF %}">{% IF catalog_full.ISSET_SUB %}<span class="open-menu {% IF catalog_full.CURRENT_PARENT || catalog_full.CURRENT %}active{% ENDIF %}"></span>{% ENDIF %}{catalog_full.NAME}</a>
					  {% IF catalog_full.ISSET_SUB=0 %}</li>{% ENDIF %}
					{% IF catalog_full.LAST %}{%FOR out%}</ul> {%IFNOT catalog_full.out.LAST%}</li>{%ENDIF%}{%ENDFOR%}{% ENDIF %}
				  {% ENDFOR %}
				{% ENDIF %}
				</ul>
			  </div>
			</div>

и перенесите после строк
		 <div class="header-col-left left" title="Меню">
			<ul class="links">
			  {% FOR menu %}
				{% FOR header %}
				  {% FOR links %}
					<li><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></li>
				  {% ENDFOR %}
				{% ENDFOR %}
			  {% ENDFOR %}
			</ul>
		  </div>

далее найдите в файле main.css
#mommenu {
	display: block;
	position: absolute;
	top: 80px;
}

замените на
#mommenu {
	display: block;
	/*position: absolute;
	top: 80px;*/
}

5. Вам внесли изменения.
6. Внесите изменения по инструкциям выше и пришлите как именно необходимо изменить сайт при самых маленьких разрешениях.

#3 Mari-ina

Mari-ina

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

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

Отправлено 16 Июль 2016 - 20:37

Изменения внесла, давайте продолжим.
1. Для расширений 1024 и 768 выровнять баннер посередине.
2. При расширении 800 и 768 телефон, поиск и значки корзины, сравнения и избранного поместить в одну строку синего меню, сейчас они опускаются вниз, поменять цвет флажка на белый
3. При расширении 600 и 533 Флажок, каталог, телефон и значки корзины, сравнения и избранного поместить в одну строку синего меню, а поиск оставить где сейчас находится под этой строкой, только по центру.
4. Для расширений 375 и менее телефон и поиск выровнять по центру и поднять поиск повыше к телефону

Жду ответа в этой теме

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

  • 128.png
  • 129.png
  • 130.png
  • 131.png


#4 Vaccina

Vaccina

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

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

Отправлено 19 Июль 2016 - 01:33

Простите за ожидание.
1. В main.css найдите:
@media all and (max-width: 1024px){

после него пропишите:
#slideshow {
	width: inherit;
}

2. В main.css перед:
@media all and (max-width: 767px) {

пропишите:
@media all and (max-width: 800px) {
#header-top .header-col-right {
  margin-top: -40px;
}
}

3. В main.css после:
@media all and (max-width: 641px) {

пропишите:
#search_mini_form {
	margin-top: 40px;
}

4. В main.css после:
@media all and (max-width: 481px) {

пропишите:
#header-top .header-col-right {
	margin-top: 0;
	width: 100%;
}
#header-top .header-col-right .phone {
	margin: 0 auto;
	float: none;
	width: 100%;
	text-align: center;
}
#search_mini_form {
	margin: -30px 0 0 0;
	float: left;
	width: 100%;
}


#5 Mari-ina

Mari-ina

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

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

Отправлено 19 Июль 2016 - 08:23

Практически все получилось, только осталось на расширениях менее 600  телефон выровнять по центру синий полосы, а поиск выровнять по центру под телефоном

#6 Danil

Danil

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

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

Отправлено 19 Июль 2016 - 13:37

Просмотр сообщенияMari-ina (19 Июль 2016 - 08:23) писал:

Практически все получилось, только осталось на расширениях менее 600  телефон выровнять по центру синий полосы, а поиск выровнять по центру под телефоном
Здравствуйте.
В конец main.css добавьте
@media (max-width: 641px) and (min-width: 481px) {
#header-top .header-col-right .phone {
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 177px;
}
#search_mini_form {
	position: absolute;
	width: 200px;
	left: 0;
	right: 0;
	margin: 0 auto;
	top: 40px;
}
}


#7 Mari-ina

Mari-ina

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

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

Отправлено 24 Сентябрь 2016 - 12:35

Здравствуйте. Сейчас посмотрела, что при добавлении товара в корзину через телефон не вся информация показывается, нужно это исправить

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

  • 143.png


#8 Danil

Danil

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

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

Отправлено 24 Сентябрь 2016 - 12:52

Просмотр сообщенияMari-ina (24 Сентябрь 2016 - 12:35) писал:

Здравствуйте. Сейчас посмотрела, что при добавлении товара в корзину через телефон не вся информация показывается, нужно это исправить
Здравствуйте.
В main.css найдите код
.cart-ajax .cart-product {overflow: hidden;position: static;margin-bottom: 10px;max-height: 115px;}
и замените на

.fancybox-inner {height: auto !important;}
.cart-ajax .cart-product {overflow: hidden;position: static;margin-bottom: 10px;}


#9 step2054

step2054

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

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

Отправлено 01 Декабрь 2016 - 10:42

Добрый день!
Очень нужна Ваша помощь.
В мобильной версии картинки сужаются некорректно только по ширине. Таблицы же остаются неестественно широкими. Скрины прилагаю.
Сайт: http://yur-kollegiya.ru/

Заранее Вам благодарен!

Прикрепляю скнрины.

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

  • IMG_1317-01-12-16-10-26.png
  • IMG_1318-01-12-16-10-26.png


#10 step2054

step2054

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

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

Отправлено 01 Декабрь 2016 - 10:50

Ещё скрин.

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

  • IMG_1319-01-12-16-10-26.png


#11 Stasya

Stasya

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

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

Отправлено 05 Декабрь 2016 - 16:38

Просмотр сообщенияstep2054 (01 Декабрь 2016 - 10:42) писал:

Добрый день!
Очень нужна Ваша помощь.
В мобильной версии картинки сужаются некорректно только по ширине. Таблицы же остаются неестественно широкими. Скрины прилагаю.
Сайт: http://yur-kollegiya.ru/

Заранее Вам благодарен!

Прикрепляю скнрины.
Здравствуйте. Проблема заключается в том, что у Вас к изображением прописаны строгие ширина и высота. Так как ширина экрана уменьшается, то уменьшается и ширина картинки. Но высота у нее строго задана, поэтому пропорционального сжатия не происходит.
Почти тоже самое происходит и с таблицей. Поэтому чтобы решить вопрос с ней Вам енобходимо убрать у таблицы ширину. Это можно сделать в редактировании страницы. И в файл main.css добавить блок
.htmlDataBlock table {
max-width: 100%;
}
С изображениями тоже самое. Т.е. убираем строгие размеры, а в конце файла main.css добавляем блок
.htmlDataBlock img {
	max-width: 100%;
}


#12 era-saitov.ru

era-saitov.ru

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

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

Отправлено 16 Февраль 2017 - 16:11

Здравствуйте! Как сделать чтобы в мобильной версии появился кликабельный номер телефона? Либо сделать кликабельную шапку с мобильного телефона, которая сейчас на сайте. Аккаунт SL-408434

#13 Mr.Nito

Mr.Nito

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

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

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

Просмотр сообщенияera-saitov.ru (16 Февраль 2017 - 16:11) писал:

Здравствуйте! Как сделать чтобы в мобильной версии появился кликабельный номер телефона? Либо сделать кликабельную шапку с мобильного телефона, которая сейчас на сайте. Аккаунт SL-408434
Здравствуйте.
Изменения в мобильной версии произвёл, проверьте, пожалуйста.

#14 era-saitov.ru

era-saitov.ru

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

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

Отправлено 18 Февраль 2017 - 21:37

Просмотр сообщенияMr.Nito (18 Февраль 2017 - 12:01) писал:

Здравствуйте.
Изменения в мобильной версии произвёл, проверьте, пожалуйста.
Да, спасибо! А можно сделать номер телефона без скобок, чтобы люди не путались? Просто это прямой номер без кода.

#15 Mr.Nito

Mr.Nito

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

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

Отправлено 18 Февраль 2017 - 23:51

Просмотр сообщенияera-saitov.ru (18 Февраль 2017 - 21:37) писал:

Да, спасибо! А можно сделать номер телефона без скобок, чтобы люди не путались? Просто это прямой номер без кода.
Скобки в номере убрал




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

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