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


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


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

#1 korki

korki

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

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

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

Здраствуйте!
В мобильной версии сайт отображается с двумя широкими полосами меню (см. вложение), как их уменьшить до ширины блока «поиск по магазину» и «главное меню» соответственно?
SL-357296

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

  • Снимок экрана 2015-09-25 в 10.01.03.png


#2 Vaccina

Vaccina

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

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

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

Попробуйте в main.css добавить:
menu .row::before {
	display: block !important;
}


#3 korki

korki

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

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

Отправлено 26 Сентябрь 2015 - 08:32

 Vaccina (26 Сентябрь 2015 - 03:44) писал:

Попробуйте в main.css добавить:
menu .row::before {
display: block !important;
}


Добавил в конце. Не помогло..

#4 RayLi

RayLi

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

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

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

 korki (26 Сентябрь 2015 - 08:32) писал:

Добавил в конце. Не помогло..

Здравствуйте.
Попробуйте, тогда, пожалуйста, сделать следующее:
В шаблоне main.css найдите данный код:

@media only screen and (max-width: 480px){
.container .cols.col-1, .container .cols.col-2, .container .cols.col-3, .container .cols.col-4, .container .cols.col-5, .container .cols.col-6, .container .cols.col-7, .container .cols.col-8, .container .cols.col-9, .container .cols.col-10, .container .cols.col-11, .container .cols.col-12 {
	width: 100%;
}

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

@media only screen and (max-width: 480px){
.container .cols.col-1, .container .cols.col-2, .container .cols.col-3, .container .cols.col-4, .container .cols.col-5, .container .cols.col-6, .container .cols.col-7, .container .cols.col-8, .container .cols.col-9, .container .cols.col-10, .container .cols.col-11, .container .cols.col-12 {
	width: 100%;
	margin-top: 0px;
}


Далее в том же шаблоне найдите вот этот код:

@media only screen and (max-width: 480px){
.container .row2 {
	display: block;
	position: static;
}

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

@media only screen and (max-width: 480px){
.container .row2 {
	display: block;
	position: static;
	height: 145px;
}


После этого в том же шаблоне найдите, пожалуйста, следующий код:

@media only screen and (max-width: 480px){
#cart {
	margin-top: 20px;
}

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

@media only screen and (max-width: 480px){
#cart {
	margin-top: 20px;
	margin-right: 26%;
}


#5 korki

korki

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

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

Отправлено 01 Октябрь 2015 - 13:23

 RayLi (26 Сентябрь 2015 - 09:55) писал:

Здравствуйте.
Попробуйте, тогда, пожалуйста, сделать следующее:
В шаблоне main.css найдите данный код:

@media only screen and (max-width: 480px){
.container .cols.col-1, .container .cols.col-2, .container .cols.col-3, .container .cols.col-4, .container .cols.col-5, .container .cols.col-6, .container .cols.col-7, .container .cols.col-8, .container .cols.col-9, .container .cols.col-10, .container .cols.col-11, .container .cols.col-12 {
width: 100%;
}

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

@media only screen and (max-width: 480px){
.container .cols.col-1, .container .cols.col-2, .container .cols.col-3, .container .cols.col-4, .container .cols.col-5, .container .cols.col-6, .container .cols.col-7, .container .cols.col-8, .container .cols.col-9, .container .cols.col-10, .container .cols.col-11, .container .cols.col-12 {
width: 100%;
margin-top: 0px;
}


Далее в том же шаблоне найдите вот этот код:

@media only screen and (max-width: 480px){
.container .row2 {
display: block;
position: static;
}

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

@media only screen and (max-width: 480px){
.container .row2 {
display: block;
position: static;
height: 145px;
}


После этого в том же шаблоне найдите, пожалуйста, следующий код:

@media only screen and (max-width: 480px){
#cart {
margin-top: 20px;
}

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

@media only screen and (max-width: 480px){
#cart {
margin-top: 20px;
margin-right: 26%;
}


Здравствуйте!
Почти помогло, спасибо!

На смартфоне еще более менее смотрится, но все равно слишком широко (см. прикрепленный «Шапка смфон», на планшете получается уже не то ( см. прикрепленный «Шапка планшет»).

Подскажите, пожалуйста, как можно:
1. ссылки «Вход и Регистрация» поднять на верх (см. вложение «Шапка-1»)
2. Корзину видоизменить ( сделать одной полоской, чтобы все элементы были в одну строчку) (см. вложение «Шапка-1»)
3. «Поиск» поставить в один ряд с корзиной, слева от нее справа от логотипа. (см. вложение «Шапка-1»)


При этом, чтобы в мобильной версии (т.е. при изменении разрешении экрана)
4. Корзина и Поиск оставались в одном ряду (см. вложение «Шапка-Mob_1»).
5. Реально ли сделать так, чтобы поиск в мобильной версии выглядел просто как значок, а при клике на него появлялось окно поиска снизу (см. вложение «Шапка-Mob_Good»
6. Вход и Регистрацию в мобильной версии опустить в подвал

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

  • шапка планшет.png
  • шапка смфон.png
  • Шапка-1.jpg
  • Шапка-Mob_1.jpg
  • Шапка-Mob_Good.jpg


#6 korki

korki

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

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

Отправлено 01 Октябрь 2015 - 14:39

Еще подскажите, пожалуйста, как слово «Купить» на кнопках заменить «В корзину»?

#7 korki

korki

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

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

Отправлено 05 Октябрь 2015 - 12:34

Ау...

#8 korki

korki

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

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

Отправлено 07 Октябрь 2015 - 19:19

 RayLi (26 Сентябрь 2015 - 09:55) писал:

Здравствуйте.
Попробуйте, тогда, пожалуйста, сделать следующее:
В шаблоне main.css найдите данный код:

@media only screen and (max-width: 480px){
.container .cols.col-1, .container .cols.col-2, .container .cols.col-3, .container .cols.col-4, .container .cols.col-5, .container .cols.col-6, .container .cols.col-7, .container .cols.col-8, .container .cols.col-9, .container .cols.col-10, .container .cols.col-11, .container .cols.col-12 {
width: 100%;
}

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

@media only screen and (max-width: 480px){
.container .cols.col-1, .container .cols.col-2, .container .cols.col-3, .container .cols.col-4, .container .cols.col-5, .container .cols.col-6, .container .cols.col-7, .container .cols.col-8, .container .cols.col-9, .container .cols.col-10, .container .cols.col-11, .container .cols.col-12 {
width: 100%;
margin-top: 0px;
}


Далее в том же шаблоне найдите вот этот код:

@media only screen and (max-width: 480px){
.container .row2 {
display: block;
position: static;
}

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

@media only screen and (max-width: 480px){
.container .row2 {
display: block;
position: static;
height: 145px;
}


После этого в том же шаблоне найдите, пожалуйста, следующий код:

@media only screen and (max-width: 480px){
#cart {
margin-top: 20px;
}

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

@media only screen and (max-width: 480px){
#cart {
margin-top: 20px;
margin-right: 26%;
}

Ребята, очень жду ответа!
Мобильная версия сайта — это ключевой момент!

#9 korki

korki

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

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

Отправлено 13 Октябрь 2015 - 09:03

 Vaccina (26 Сентябрь 2015 - 03:44) писал:

Попробуйте в main.css добавить:
menu .row::before {
display: block !important;
}

В чем причина отсутствия вашей тех.поддержки?

#10 Ирина345

Ирина345

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

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

Отправлено 13 Октябрь 2015 - 13:47

 korki (01 Октябрь 2015 - 13:23) писал:

Здравствуйте!
Почти помогло, спасибо!

На смартфоне еще более менее смотрится, но все равно слишком широко (см. прикрепленный «Шапка смфон», на планшете получается уже не то ( см. прикрепленный «Шапка планшет»).

Подскажите, пожалуйста, как можно:
1. ссылки «Вход и Регистрация» поднять на верх (см. вложение «Шапка-1»)
2. Корзину видоизменить ( сделать одной полоской, чтобы все элементы были в одну строчку) (см. вложение «Шапка-1»)
3. «Поиск» поставить в один ряд с корзиной, слева от нее справа от логотипа. (см. вложение «Шапка-1»)


При этом, чтобы в мобильной версии (т.е. при изменении разрешении экрана)
4. Корзина и Поиск оставались в одном ряду (см. вложение «Шапка-Mob_1»).
5. Реально ли сделать так, чтобы поиск в мобильной версии выглядел просто как значок, а при клике на него появлялось окно поиска снизу (см. вложение «Шапка-Mob_Good»
6. Вход и Регистрацию в мобильной версии опустить в подвал
Здравствуйте,
1. найдите в файле main.css


.row2 .marg4 {
	margin-left: 33.333333333%;
	margin-top: 130px;
	margin-right: -33% !important;
}
замените на


.row2 .marg4 {
	margin-left: 33.333333333%;
	margin-top: 92px;
	margin-right: -33% !important;
}

далее найдите

2.
найдите в шаблоне hTML
<!-- Корзина -->
			<div id="cart">
			  <div class="incart">
			  <div class="carttotalqty theme-color">
				{CART_COUNT_TOTAL}
			  </div>
				<a class="cartanchor" href="{CART_URL}" title="Перейти в корзину">{%IF user_agent_opera%}<img src="{ASSETS_IMAGES_PATH}cart.png?design=chameleon"/>{%ELSE%}{%ENDIF%}
				 <span> {% IF cart_count_empty %}
					<span>0</span> <span class="rub">P<span class="rubT"></span></span>
				  {% ELSE %}
					{% FOR cart_sum %}
				   <span class="icon-cart" style="	float: left;margin: 4px 7px 0 -25px;"></span>   {cart_sum.NOW}<span class="">P<span class="rubT"></span></span>
					{% ENDFOR %}
				  {% ENDIF %}</span></span>
				</a>
			  </div><!--END heading-->
			  <div class="clear"></div>
			</div>
			<!-- end Корзина -->
замените на
<!-- Корзина -->
			<div id="cart">
			  <div class="incart">
			  <div class="carttotalqty theme-color">
				{CART_COUNT_TOTAL}
			  </div>
				<a class="cartanchor" href="{CART_URL}" title="Перейти в корзину">{%IF user_agent_opera%}<img src="{ASSETS_IMAGES_PATH}cart.png?design=chameleon"/>{%ELSE%}{%ENDIF%}
				 <span> {% IF cart_count_empty %}
					<span>0</span> <span class="rub">P<span class="rubT"></span></span>
				  {% ELSE %}
					{% FOR cart_sum %}
				   <span class="icon-cart" style="	float: left;margin: 4px 7px 0 -25px;"></span>   {cart_sum.NOW}<span class="">P<span class="rubT"></span></span>
					{% ENDFOR %}
				  {% ENDIF %}</span></span>
				</a>
			  </div><!--END heading-->
			  <div class="clear"></div>
			</div>
			<!-- end Корзина -->

в шаблоне Быстрый заказ найдите

  <a class="cartanchor" href="{CART_URL}" title="Перейти в корзину"><span class="icon-cart"></span>							  
				  {% IF cart_count_empty %}
					<span>0</span> <span class="rub">P<span class="rubT"></span></span>
				  {% ELSE %}
					{% FOR cart_sum %}
					  {cart_sum.NOW}<span class="rub">P<span class="rubT"></span></span>
					{% ENDFOR %}
				  {% ENDIF %}</span>
				</a>
замените на





  <a class="cartanchor" href="{CART_URL}" title="Перейти в корзину">{%IF user_agent_opera%}<img src="{ASSETS_IMAGES_PATH}cart.png?design=chameleon"/>{%ELSE%}{%ENDIF%}
				 <span> {% IF cart_count_empty %}
					<span>0</span> <span class="rub">P<span class="rubT"></span></span>
				  {% ELSE %}
					{% FOR cart_sum %}
				   <span class="icon-cart" style="	float: left;margin: 4px 7px 0 -25px;"></span>   {cart_sum.NOW}<span class="">P<span class="rubT"></span></span>
					{% ENDFOR %}
				  {% ENDIF %}</span></span>
				</a>

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

#11 korki

korki

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

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

Отправлено 13 Октябрь 2015 - 14:39

 Ирина345 (13 Октябрь 2015 - 13:47) писал:

Здравствуйте,
1. найдите в файле main.css


.row2 .marg4 {
margin-left: 33.333333333%;
margin-top: 130px;
margin-right: -33% !important;
}
замените на


.row2 .marg4 {
margin-left: 33.333333333%;
margin-top: 92px;
margin-right: -33% !important;
}

далее найдите

2.
найдите в шаблоне hTML
<!-- Корзина -->
<div id="cart">
<div class="incart">
<div class="carttotalqty theme-color">
{CART_COUNT_TOTAL}
</div>
<a class="cartanchor" href="{CART_URL}" title="Перейти в корзину">{%IF user_agent_opera%}<img src="{ASSETS_IMAGES_PATH}cart.png?design=chameleon"/>{%ELSE%}{%ENDIF%}
<span> {% IF cart_count_empty %}
<span>0</span> <span class="rub">P<span class="rubT"></span></span>
{% ELSE %}
{% FOR cart_sum %}
<span class="icon-cart" style=" float: left;margin: 4px 7px 0 -25px;"></span> {cart_sum.NOW}<span class="">P<span class="rubT"></span></span>
{% ENDFOR %}
{% ENDIF %}</span></span>
</a>
</div><!--END heading-->
<div class="clear"></div>
</div>
<!-- end Корзина -->
замените на
<!-- Корзина -->
<div id="cart">
<div class="incart">
<div class="carttotalqty theme-color">
{CART_COUNT_TOTAL}
</div>
<a class="cartanchor" href="{CART_URL}" title="Перейти в корзину">{%IF user_agent_opera%}<img src="{ASSETS_IMAGES_PATH}cart.png?design=chameleon"/>{%ELSE%}{%ENDIF%}
<span> {% IF cart_count_empty %}
<span>0</span> <span class="rub">P<span class="rubT"></span></span>
{% ELSE %}
{% FOR cart_sum %}
<span class="icon-cart" style=" float: left;margin: 4px 7px 0 -25px;"></span> {cart_sum.NOW}<span class="">P<span class="rubT"></span></span>
{% ENDFOR %}
{% ENDIF %}</span></span>
</a>
</div><!--END heading-->
<div class="clear"></div>
</div>
<!-- end Корзина -->

в шаблоне Быстрый заказ найдите

<a class="cartanchor" href="{CART_URL}" title="Перейти в корзину"><span class="icon-cart"></span>
{% IF cart_count_empty %}
<span>0</span> <span class="rub">P<span class="rubT"></span></span>
{% ELSE %}
{% FOR cart_sum %}
{cart_sum.NOW}<span class="rub">P<span class="rubT"></span></span>
{% ENDFOR %}
{% ENDIF %}</span>
</a>
замените на





<a class="cartanchor" href="{CART_URL}" title="Перейти в корзину">{%IF user_agent_opera%}<img src="{ASSETS_IMAGES_PATH}cart.png?design=chameleon"/>{%ELSE%}{%ENDIF%}
<span> {% IF cart_count_empty %}
<span>0</span> <span class="rub">P<span class="rubT"></span></span>
{% ELSE %}
{% FOR cart_sum %}
<span class="icon-cart" style=" float: left;margin: 4px 7px 0 -25px;"></span> {cart_sum.NOW}<span class="">P<span class="rubT"></span></span>
{% ENDFOR %}
{% ENDIF %}</span></span>
</a>

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

Добрый день!
Спасибо за ответ!
Корзина приняла практически подходящий вид. Но когда она пустая, ноль и символ Р находятся друг на друге. см вложение

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

  • Снимок экрана 2015-10-13 в 14.37.00.png


#12 Alekseys

Alekseys

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

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

Отправлено 14 Октябрь 2015 - 20:42

 korki (13 Октябрь 2015 - 14:39) писал:

Добрый день!
Спасибо за ответ!
Корзина приняла практически подходящий вид. Но когда она пустая, ноль и символ Р находятся друг на друге. см вложение
Здравствуйте. Если я правильно Вас понял, в шаблоне HTML замените
		  <!-- Корзина -->
						<div id="cart">
						  <div class="incart">
						  <div class="carttotalqty theme-color">
								{CART_COUNT_TOTAL}
						  </div>
								<a class="cartanchor" href="{CART_URL}" title="Перейти в корзину">{%IF user_agent_opera%}<img src="{ASSETS_IMAGES_PATH}cart.png?design=chameleon"/>{%ELSE%}{%ENDIF%}
								 <span> {% IF cart_count_empty %}
										<span>0</span> <span class="rub">P<span class="rubT"></span></span>
								  {% ELSE %}
										{% FOR cart_sum %}
								   <span class="icon-cart" style="	  float: left;margin: 4px 7px 0 -25px;"></span>   {cart_sum.NOW}<span class="">P<span class="rubT"></span></span>
										{% ENDFOR %}
								  {% ENDIF %}</span></span>
								</a>
						  </div><!--END heading-->
						  <div class="clear"></div>
						</div>
						<!-- end Корзина -->
на
			<!-- Корзина -->
			  <div id="cart">
				<div class="incart">
				  <div class="carttotalqty theme-color">
					{CART_COUNT_TOTAL}
				  </div>
				  <a class="cartanchor" href="{CART_URL}" title="Перейти в корзину">
					{%IF user_agent_opera%}<img src="{ASSETS_IMAGES_PATH}cart.png?design=chameleon"/>{%ELSE%}{%ENDIF%}
					<span>
					  {% IF cart_count_empty %}
						<span class="icon-cart" style="float: left;margin: 4px 7px 0 -25px;"></span>0<span class="">P<span class="rubT"></span></span>
					  {% ELSE %}
						{% FOR cart_sum %}
						  <span class="icon-cart" style="float: left;margin: 4px 7px 0 -25px;"></span>
						  {cart_sum.NOW}
						  <span class="">P<span class="rubT"></span></span>
						{% ENDFOR %}
					  {% ENDIF %}
					</span></span>
				  </a>
				</div><!--END heading-->
				<div class="clear"></div>
			  </div>
			<!-- end Корзина -->


#13 korki

korki

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

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

Отправлено 14 Октябрь 2015 - 23:40

 Alekseys (14 Октябрь 2015 - 20:42) писал:

Здравствуйте. Если я правильно Вас понял, в шаблоне HTML замените
		 <!-- Корзина -->
					 <div id="cart">
						 <div class="incart">
						 <div class="carttotalqty theme-color">
							 {CART_COUNT_TOTAL}
						 </div>
							 <a class="cartanchor" href="{CART_URL}" title="Перейти в корзину">{%IF user_agent_opera%}<img src="{ASSETS_IMAGES_PATH}cart.png?design=chameleon"/>{%ELSE%}{%ENDIF%}
								 <span> {% IF cart_count_empty %}
									 <span>0</span> <span class="rub">P<span class="rubT"></span></span>
								 {% ELSE %}
									 {% FOR cart_sum %}
								 <span class="icon-cart" style="	 float: left;margin: 4px 7px 0 -25px;"></span> {cart_sum.NOW}<span class="">P<span class="rubT"></span></span>
									 {% ENDFOR %}
								 {% ENDIF %}</span></span>
							 </a>
						 </div><!--END heading-->
						 <div class="clear"></div>
					 </div>
					 <!-- end Корзина -->
на
		 <!-- Корзина -->
			 <div id="cart">
			 <div class="incart">
				 <div class="carttotalqty theme-color">
				 {CART_COUNT_TOTAL}
				 </div>
				 <a class="cartanchor" href="{CART_URL}" title="Перейти в корзину">
				 {%IF user_agent_opera%}<img src="{ASSETS_IMAGES_PATH}cart.png?design=chameleon"/>{%ELSE%}{%ENDIF%}
				 <span>
					 {% IF cart_count_empty %}
					 <span class="icon-cart" style="float: left;margin: 4px 7px 0 -25px;"></span>0<span class="">P<span class="rubT"></span></span>
					 {% ELSE %}
					 {% FOR cart_sum %}
						 <span class="icon-cart" style="float: left;margin: 4px 7px 0 -25px;"></span>
						 {cart_sum.NOW}
						 <span class="">P<span class="rubT"></span></span>
					 {% ENDFOR %}
					 {% ENDIF %}
				 </span></span>
				 </a>
			 </div><!--END heading-->
			 <div class="clear"></div>
			 </div>
		 <!-- end Корзина -->

Здравствуйте! Помогло, спасибо!
Только вот теперь когда в корзине что-то есть, буква Р переносится вниз и корзина увеличивается по высоте. см вложение

и что скажете по остальным моим вопросам?

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

  • Снимок экрана 2015-10-14 в 23.36.50.png


#14 Vaccina

Vaccina

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

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

Отправлено 15 Октябрь 2015 - 03:21

{% ELSE %}
												{% FOR cart_sum %}
												  <span class="icon-cart" style="float: left;margin: 4px 7px 0 -25px;"></span>
												  {cart_sum.NOW}
												  <span class="">P<span class="rubT"></span></span>
												{% ENDFOR %}
										  {% ENDIF %}
замените на:
{% ELSE %}
												{% FOR cart_sum %}
												  <span class="icon-cart" style="float: left;margin: 4px 7px 0 -25px;"></span>
												  <span class=""> {cart_sum.NOW}P<span class="rubT"></span></span>
												{% ENDFOR %}
										  {% ENDIF %}


#15 korki

korki

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

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

Отправлено 15 Октябрь 2015 - 07:40

 Vaccina (15 Октябрь 2015 - 03:21) писал:

{% ELSE %}
											 {% FOR cart_sum %}
												 <span class="icon-cart" style="float: left;margin: 4px 7px 0 -25px;"></span>
												 {cart_sum.NOW}
												 <span class="">P<span class="rubT"></span></span>
											 {% ENDFOR %}
										 {% ENDIF %}
замените на:
{% ELSE %}
											 {% FOR cart_sum %}
												 <span class="icon-cart" style="float: left;margin: 4px 7px 0 -25px;"></span>
												 <span class=""> {cart_sum.NOW}P<span class="rubT"></span></span>
											 {% ENDFOR %}
										 {% ENDIF %}

Спасибо, сработало!
Жду ответ по остальным вопросам!

#16 Vaccina

Vaccina

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

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

Отправлено 16 Октябрь 2015 - 05:08

Цитата

3. «Поиск» поставить в один ряд с корзиной, слева от нее справа от логотипа. (см. вложение «Шапка-1»)
В main.css найдите:
.row2 .marg4 {
	margin-right: -33% !important;
	margin-top: 92px;
	margin-left: 33.3333%;
}
замените на:
.row2 .marg4 {
	margin-top: 92px;
}
.header .row2 .col-4:first-child {
	float: left;
	margin-left: 33.3%;
	margin-top: 82px;
}

в main.css найдите:
#search_mini_form input {
	padding: 2px 90px 2px 4px;
	font-size: 14px;
	color: #FFF;
}
замените на:
#search_mini_form input {
	padding: 2px 90px 2px 4px;
	font-size: 14px;
	color: #FFF;
	width: 100%;
}


#17 korki

korki

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

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

Отправлено 16 Октябрь 2015 - 07:54

 Vaccina (16 Октябрь 2015 - 05:08) писал:

В main.css найдите:
.row2 .marg4 {
margin-right: -33% !important;
margin-top: 92px;
margin-left: 33.3333%;
}
замените на:
.row2 .marg4 {
margin-top: 92px;
}
.header .row2 .col-4:first-child {
float: left;
margin-left: 33.3%;
margin-top: 82px;
}

в main.css найдите:
#search_mini_form input {
padding: 2px 90px 2px 4px;
font-size: 14px;
color: #FFF;
}
замените на:
#search_mini_form input {
padding: 2px 90px 2px 4px;
font-size: 14px;
color: #FFF;
width: 100%;
}

Спасибо, в стандартной версии все отлично!
В мобильной версии корзина и поиск сильно сместились в низ, полоски как и раньше широкие. Жду комментариев по остальным вопросам!

#18 Danil

Danil

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

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

Отправлено 16 Октябрь 2015 - 10:17

 korki (16 Октябрь 2015 - 07:54) писал:

Спасибо, в стандартной версии все отлично!
В мобильной версии корзина и поиск сильно сместились в низ, полоски как и раньше широкие. Жду комментариев по остальным вопросам!
Здравствуйте.
В main.css найдите код
.header .row2 .col-4:first-child {
	 float: left;
	 margin-left: 33.3%;
	 margin-top: 82px;
}
и замените на
.header .row2 .col-4:first-child {
	 float: left;
	 margin-left: 33.3%;
	 margin-top: 82px;
}
@media only screen and (max-width: 1024px) and (min-width: 481px) {
.header .row2 .col-4:first-child {
margin-left: 0px;
	 margin-top: 0px;
}
.row2 .marg4 {
margin-top: 0px;
}
}


#19 korki

korki

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

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

Отправлено 16 Октябрь 2015 - 11:25

 Danil (16 Октябрь 2015 - 10:17) писал:

Здравствуйте.
В main.css найдите код
.header .row2 .col-4:first-child {
	 float: left;
	 margin-left: 33.3%;
	 margin-top: 82px;
}
и замените на
.header .row2 .col-4:first-child {
	 float: left;
	 margin-left: 33.3%;
	 margin-top: 82px;
}
@media only screen and (max-width: 1024px) and (min-width: 481px) {
.header .row2 .col-4:first-child {
margin-left: 0px;
	 margin-top: 0px;
}
.row2 .marg4 {
margin-top: 0px;
}
}

Уже лучше!

Но все равно на небольшом смартфоне выглядит все вот так: см. вложение.

Если убрать вход и регистрацию наверх, как я просил:
«1. ссылки «Вход и Регистрация» поднять на верх (см. вложение «Шапка-1»)»
то цветные плашки станут  еще уже.

И все-таки возможно ли сделать так как я просил в начале?:
«
При этом, чтобы в мобильной версии (т.е. при изменении разрешении экрана)
4. Корзина и Поиск оставались в одном ряду (см. вложение «Шапка-Mob_1»).
5. Реально ли сделать так, чтобы поиск в мобильной версии выглядел просто как значок, а при клике на него появлялось окно поиска снизу (см. вложение «Шапка-Mob_Good»
6. Вход и Регистрацию в мобильной версии опустить в подвал »

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

  • Снимок экрана 2015-10-16 в 11.20.19.png


#20 Danil

Danil

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

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

Отправлено 16 Октябрь 2015 - 11:32

 korki (16 Октябрь 2015 - 11:25) писал:

Уже лучше!

Но все равно на небольшом смартфоне выглядит все вот так: см. вложение.

Если убрать вход и регистрацию наверх, как я просил:
«1. ссылки «Вход и Регистрация» поднять на верх (см. вложение «Шапка-1»)»
то цветные плашки станут  еще уже.

И все-таки возможно ли сделать так как я просил в начале?:
«
При этом, чтобы в мобильной версии (т.е. при изменении разрешении экрана)
4. Корзина и Поиск оставались в одном ряду (см. вложение «Шапка-Mob_1»).
5. Реально ли сделать так, чтобы поиск в мобильной версии выглядел просто как значок, а при клике на него появлялось окно поиска снизу (см. вложение «Шапка-Mob_Good»
6. Вход и Регистрацию в мобильной версии опустить в подвал »
Код
.header .row2 .col-4:first-child {
		 float: left;
		 margin-left: 33.3%;
		 margin-top: 82px;
}
@media only screen and (max-width: 1024px) and (min-width: 481px) {
.header .row2 .col-4:first-child {
margin-left: 0px;
		 margin-top: 0px;
}
.row2 .marg4 {
margin-top: 0px;
}
}
замените на
.header .row2 .col-4:first-child {
		 float: left;
}
@media only screen and (max-width: 1024px) and (min-width: 481px) {
.header .row2 .col-4:first-child {
margin-left: 0px;
		 margin-top: 0px;
}
.row2 .marg4 {
margin-top: 0px;
}
}
@media only screen and (min-width: 1025px) {
.header .row2 .col-4:first-child {
		 margin-left: 33.3%;
		 margin-top: 82px;
}
}





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

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