Мобильная Версия Шаблон Хамелеон
#1
Отправлено 25 Сентябрь 2015 - 10:04
В мобильной версии сайт отображается с двумя широкими полосами меню (см. вложение), как их уменьшить до ширины блока «поиск по магазину» и «главное меню» соответственно?
SL-357296
#2
Отправлено 26 Сентябрь 2015 - 03:44
menu .row::before { display: block !important; }
#4
Отправлено 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
Отправлено 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. Вход и Регистрацию в мобильной версии опустить в подвал
#6
Отправлено 01 Октябрь 2015 - 14:39
#7
Отправлено 05 Октябрь 2015 - 12:34
#8
Отправлено 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%; }
Ребята, очень жду ответа!
Мобильная версия сайта — это ключевой момент!
#10
Отправлено 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
Отправлено 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>Изменить для начало внешний вид корзины, а потом исправим отображение мобильной версии.
Добрый день!
Спасибо за ответ!
Корзина приняла практически подходящий вид. Но когда она пустая, ноль и символ Р находятся друг на друге. см вложение
#12
Отправлено 14 Октябрь 2015 - 20:42
korki (13 Октябрь 2015 - 14:39) писал:
Спасибо за ответ!
Корзина приняла практически подходящий вид. Но когда она пустая, ноль и символ Р находятся друг на друге. см вложение
<!-- Корзина --> <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
Отправлено 14 Октябрь 2015 - 23:40
Alekseys (14 Октябрь 2015 - 20:42) писал:
<!-- Корзина --> <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 Корзина -->
Здравствуйте! Помогло, спасибо!
Только вот теперь когда в корзине что-то есть, буква Р переносится вниз и корзина увеличивается по высоте. см вложение
и что скажете по остальным моим вопросам?
#14
Отправлено 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
Отправлено 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
Отправлено 16 Октябрь 2015 - 05:08
Цитата
.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
Отправлено 16 Октябрь 2015 - 07:54
Vaccina (16 Октябрь 2015 - 05:08) писал:
.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
Отправлено 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
Отправлено 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. Вход и Регистрацию в мобильной версии опустить в подвал »
#20
Отправлено 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 анонимных