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


Редактировать Расположение Блоков В Мобильной Версии

Автор like.hornet.6, 23 авг. 2015 22:41
мобильная версия изменить расположение

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

#1 like.hornet.6

like.hornet.6

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

  • Пользователи
  • PipPipPip
  • 186 сообщений
  • ГородРостов-на-Дону

Отправлено 23 Август 2015 - 22:41

Зашёл на сайт со смартфона, то есть в мобильную версию.
Очень не удобно выполнено расположение блоков - сначала шапка, затем текст главной страницы, затем новинки магазина, и только после список категорий товаров.

Я сам пока нашёл категории - грубо говоря запутался и забыл зачем зашёл на сайт.

Так вот, что требуется поменять: переместить блок со списком категорий в верх, под самую шапку, то есть чтобы шла шапка, затем категории, и потом текст главной страницы.

Заранее спасибо.

#2 like.hornet.6

like.hornet.6

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

  • Пользователи
  • PipPipPip
  • 186 сообщений
  • ГородРостов-на-Дону

Отправлено 29 Август 2015 - 12:23

Уважаемые модераторы, не оставляйте мой вопрос без внимания, умоляю!!!

#3 Danil

Danil

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

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

Отправлено 29 Август 2015 - 13:19

Просмотр сообщенияlike.hornet.6 (29 Август 2015 - 12:23) писал:

Уважаемые модераторы, не оставляйте мой вопрос без внимания, умоляю!!!
Здравствуйте.
В шаблоне html найдите код
Скрытый текст
и перенесите его, вставив перед 
<!-- Контент страницы -->
В main.css найдите код 
#content {
	width: 72.1%;
	margin-left: 0.002%;
	display: table-cell;
	float: left;
	margin: 0% 0.7% 0% 0%;
	background: white;
	min-height: 100%;
	float: right;
	clear: both;
}
и замените на 
#content {
	width: 72.1%;
	margin-left: 0.002%;
	display: table-cell;
	float: left;
	margin: 0% 0.7% 0% 0%;
	background: white;
	min-height: 100%;
	float: right;
}

#4 like.hornet.6

like.hornet.6

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

  • Пользователи
  • PipPipPip
  • 186 сообщений
  • ГородРостов-на-Дону

Отправлено 03 Сентябрь 2015 - 01:19

Просмотр сообщенияDanil (29 Август 2015 - 13:19) писал:

Здравствуйте.
В шаблоне html найдите код
Скрытый текст
и перенесите его, вставив перед
<!-- Контент страницы -->
В main.css найдите код
#content {
width: 72.1%;
margin-left: 0.002%;
display: table-cell;
float: left;
margin: 0% 0.7% 0% 0%;
background: white;
min-height: 100%;
float: right;
clear: both;
}
и замените на
#content {
width: 72.1%;
margin-left: 0.002%;
display: table-cell;
float: left;
margin: 0% 0.7% 0% 0%;
background: white;
min-height: 100%;
float: right;
}
Поменял как написали, но получилось очень коряво - блок с текстами перенёсся на уровень ниже всех блоков слева, то есть смотря на страницу сначала идут левые блоки и по центру пустое место, и как только они заканчиваются (левые блоки) - тогда только начинается текстовый блок.
Не то. Что ещё поменять нужно или исправить?

#5 Vaccina

Vaccina

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

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

Отправлено 03 Сентябрь 2015 - 06:40

В шаблоне HTML найдите:
<div class="block">
		 <div class="title green fmlptn fnt18 over "><a href="{CATALOG_URL}" class="arrow-toggle">Каталог <span>магазина</span></a></div>
		 <div class="main ullinks fntarl fnt12">
				 <ul>
						 {% IFNOT catalog_empty %}
						 {% FOR catalog %}
								 {% IFNOT catalog.HIDE %}
								 <li class="{% IF catalog.LEVEL>0%}anone{% ENDIF %} {% IF catalog.CURRENT %}fnt12 b{% ENDIF %}"><a href="{catalog.URL}" {% IF catalog.LEVEL>0%}style="margin-left:15px; background:#be91cf; color:#fff;padding-left:{catalog.LEVEL | multiply("10")}px"{% ENDIF %}>{catalog.NAME}</a></li>
								 {% ENDIF %}
						 {% ENDFOR %}
						 {% ENDIF %}
				 </ul>
</div>
		 <div class="bottom"></div>
</div>

замените на:
<div class="block not_mob">
		 <div class="title green fmlptn fnt18 over "><a href="{CATALOG_URL}" class="arrow-toggle">Каталог <span>магазина</span></a></div>
		 <div class="main ullinks fntarl fnt12">
				 <ul>
						 {% IFNOT catalog_empty %}
						 {% FOR catalog %}
								 {% IFNOT catalog.HIDE %}
								 <li class="{% IF catalog.LEVEL>0%}anone{% ENDIF %} {% IF catalog.CURRENT %}fnt12 b{% ENDIF %}"><a href="{catalog.URL}" {% IF catalog.LEVEL>0%}style="margin-left:15px; background:#be91cf; color:#fff;padding-left:{catalog.LEVEL | multiply("10")}px"{% ENDIF %}>{catalog.NAME}</a></li>
								 {% ENDIF %}
						 {% ENDFOR %}
						 {% ENDIF %}
				 </ul>
</div>
		 <div class="bottom"></div>
</div>

далее в шаблоне HTML перед:
<!-- Контент страницы -->

вставьте:
<div id="leftcolum" class="fleft mob">
<div class="block">
		 <div class="title green fmlptn fnt18 over "><a href="{CATALOG_URL}" class="arrow-toggle">Каталог <span>магазина</span></a></div>
		 <div class="main ullinks fntarl fnt12">
				 <ul>
						 {% IFNOT catalog_empty %}
						 {% FOR catalog %}
								 {% IFNOT catalog.HIDE %}
								 <li class="{% IF catalog.LEVEL>0%}anone{% ENDIF %} {% IF catalog.CURRENT %}fnt12 b{% ENDIF %}"><a href="{catalog.URL}" {% IF catalog.LEVEL>0%}style="margin-left:15px; background:#be91cf; color:#fff;padding-left:{catalog.LEVEL | multiply("10")}px"{% ENDIF %}>{catalog.NAME}</a></li>
								 {% ENDIF %}
						 {% ENDFOR %}
						 {% ENDIF %}
				 </ul>
</div>
		 <div class="bottom"></div>
</div>
</div>

В main.css найдите:
#content {
width: 72.1%;
margin-left: 0.002%;
display: table-cell;
float: left;
margin: 0% 0.7% 0% 0%;
background: white;
min-height: 100%;
float: right;
clear: both;
}

после него вставьте:
.mob{
display:none;
}

далее найдите:
/************************************************************************************
smaller than 760
Для планшетов
*************************************************************************************/
@media screen and (max-width: 760px) {

после него вставьте:
.not_mob{
display:none;
}
.mob{display:block;}

#6 like.hornet.6

like.hornet.6

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

  • Пользователи
  • PipPipPip
  • 186 сообщений
  • ГородРостов-на-Дону

Отправлено 05 Сентябрь 2015 - 09:25

Просмотр сообщенияVaccina (03 Сентябрь 2015 - 06:40) писал:

В шаблоне HTML найдите:
<div class="block">
		 <div class="title green fmlptn fnt18 over "><a href="{CATALOG_URL}" class="arrow-toggle">Каталог <span>магазина</span></a></div>
		 <div class="main ullinks fntarl fnt12">
				 <ul>
						 {% IFNOT catalog_empty %}
						 {% FOR catalog %}
								 {% IFNOT catalog.HIDE %}
								 <li class="{% IF catalog.LEVEL>0%}anone{% ENDIF %} {% IF catalog.CURRENT %}fnt12 b{% ENDIF %}"><a href="{catalog.URL}" {% IF catalog.LEVEL>0%}style="margin-left:15px; background:#be91cf; color:#fff;padding-left:{catalog.LEVEL | multiply("10")}px"{% ENDIF %}>{catalog.NAME}</a></li>
								 {% ENDIF %}
						 {% ENDFOR %}
						 {% ENDIF %}
				 </ul>
</div>
		 <div class="bottom"></div>
</div>

замените на:
<div class="block not_mob">
		 <div class="title green fmlptn fnt18 over "><a href="{CATALOG_URL}" class="arrow-toggle">Каталог <span>магазина</span></a></div>
		 <div class="main ullinks fntarl fnt12">
				 <ul>
						 {% IFNOT catalog_empty %}
						 {% FOR catalog %}
								 {% IFNOT catalog.HIDE %}
								 <li class="{% IF catalog.LEVEL>0%}anone{% ENDIF %} {% IF catalog.CURRENT %}fnt12 b{% ENDIF %}"><a href="{catalog.URL}" {% IF catalog.LEVEL>0%}style="margin-left:15px; background:#be91cf; color:#fff;padding-left:{catalog.LEVEL | multiply("10")}px"{% ENDIF %}>{catalog.NAME}</a></li>
								 {% ENDIF %}
						 {% ENDFOR %}
						 {% ENDIF %}
				 </ul>
</div>
		 <div class="bottom"></div>
</div>

далее в шаблоне HTML перед:
<!-- Контент страницы -->

вставьте:
<div id="leftcolum" class="fleft mob">
<div class="block">
		 <div class="title green fmlptn fnt18 over "><a href="{CATALOG_URL}" class="arrow-toggle">Каталог <span>магазина</span></a></div>
		 <div class="main ullinks fntarl fnt12">
				 <ul>
						 {% IFNOT catalog_empty %}
						 {% FOR catalog %}
								 {% IFNOT catalog.HIDE %}
								 <li class="{% IF catalog.LEVEL>0%}anone{% ENDIF %} {% IF catalog.CURRENT %}fnt12 b{% ENDIF %}"><a href="{catalog.URL}" {% IF catalog.LEVEL>0%}style="margin-left:15px; background:#be91cf; color:#fff;padding-left:{catalog.LEVEL | multiply("10")}px"{% ENDIF %}>{catalog.NAME}</a></li>
								 {% ENDIF %}
						 {% ENDFOR %}
						 {% ENDIF %}
				 </ul>
</div>
		 <div class="bottom"></div>
</div>
</div>

В main.css найдите:
#content {
width: 72.1%;
margin-left: 0.002%;
display: table-cell;
float: left;
margin: 0% 0.7% 0% 0%;
background: white;
min-height: 100%;
float: right;
clear: both;
}

после него вставьте:
.mob{
display:none;
}

далее найдите:
/************************************************************************************
smaller than 760
Для планшетов
*************************************************************************************/
@media screen and (max-width: 760px) {

после него вставьте:
.not_mob{
display:none;
}
.mob{display:block;}

Сделал всё по инструкции - в версии для ПК отображается два блока "Каталог товаров". Видимо блок для мобильной версии на ПК не скрывается, а по идее должен. Странно...
В main.css ещё поменять что-то нужно?

#7 Danil

Danil

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

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

Отправлено 06 Сентябрь 2015 - 15:22

Просмотр сообщенияlike.hornet.6 (05 Сентябрь 2015 - 09:25) писал:

Сделал всё по инструкции - в версии для ПК отображается два блока "Каталог товаров". Видимо блок для мобильной версии на ПК не скрывается, а по идее должен. Странно...
В main.css ещё поменять что-то нужно?
Пришлите пожалуйста скриншот, с описанной Вами ошибкой, т.к. второго каталога в версии на ПК обнаружить не удалось.

#8 like.hornet.6

like.hornet.6

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

  • Пользователи
  • PipPipPip
  • 186 сообщений
  • ГородРостов-на-Дону

Отправлено 10 Сентябрь 2015 - 09:25

Просмотр сообщенияDanil (06 Сентябрь 2015 - 15:22) писал:

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

Скриншот:

два-блока-категории.jpg

Думаю, слова излишни.
Смотрю с оперы, если что. С других браузеров не смотрел, но раз ошибка в одном есть, то может быть и в другом.
Не увидели второго блока вы видимо потому, что Я сразу всё на свои места поставил, бекап восстановил.

#9 Новичок Ю

Новичок Ю

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

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

Отправлено 16 Май 2020 - 13:28

Добрый день! Уже задавала свои вопросы в другой ветке, не ответили.. может, не туда писала..
1) в мобильной версии не видно шапку сайта с названием магазина и логотипом.
2) с главной страницы непонятно, как найти каталог.
Возможно сделать, чтоб ссылку на каталог дать в  меню при нажатии на 3 горизонтальные полоски в правом верхнем углу. Обычно это так происходит на сайтах..
Очень прошу не оставлять вопрос без внимания. Заранее спасибо!
Обратно в Изменение общей стилистики



Темы с аналогичным тегами мобильная версия, изменить расположение

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

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

  1. Форум владельцев интернет-магазинов
  2. → Вопросы работы сервиса StoreLand
  3. → Дизайн
  4. → Шаблон Радость
  5. → Изменение общей стилистики
  6. Privacy Policy