Корректировки В Адаптивности
#1
Отправлено 26 Март 2016 - 01:21
На экране смартфона не совсем корректно отображаются некоторые моменты:
1) на странице обратной связи поля справа выходят за границы экрана (фото1)
2) в корзине, при оформлении заказа, кнопку нужно выровнять по центру (фото2)
3) также на странице корзины некорректно отображается надпись "Корзина покупок" (фото3)
4) в личном кабинете нужно кнопки сделать длиннее, чтобы текст помещался в одну строку (фото4)
5) если прокрутить страницу вниз и вызвать боковое меню, то открывается пустое поле, из-за того что меню тоже прокручивается вместе со страницей (фото5). Можно его как-то зафиксировать?
6) на iPad, в вертикальном положении, страницы регистрации и восстановления пароля отображаются как на фото 6. Хотелось бы чтобы было как на странице авторизации.
#2
Отправлено 26 Март 2016 - 03:44
@media only screen and (min-width:320px) and (max-width:485px){
найдите:
.regField { text-align: center; }
замените на:
.regField { text-align: center; width: 100%; }
2. В main.css после той же строки найдите:
.buttonWrap { margin-bottom: 5px; text-align: center; }
замените на:
.buttonWrap { margin: 0 auto; text-align: center; }
3. После той же строки найдите:
.page_title { text-align: center; }
замените на:
.page_title { text-align: left; }
4. В main.css найдите:
.right button, .right .button { display: block; margin: 0px auto; line-height: 40px; width: 40%; padding: 5px; border: none; background: #99CF22; color: white; font-size: 18px; cursor: pointer; text-align: center; }
замените на:
.right button, .right .button { display: block; margin: 0px auto; line-height: 40px; width: 100%; padding: 5px; border: none; background: #99CF22; color: white; font-size: 18px; cursor: pointer; text-align: center; }
5.В шаблое HTML найдите:
<div class="LRmenubutton">Меню</div> <div class="LRmenucont"> {% FOR menu %} {% FOR header %} {% FOR links %} <a class="menuparent {% IF menu.header.links.SELECTED %}selected{%ENDIF%}" href="{menu.header.links.URL}" {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a> {% ENDFOR %} {% ENDFOR %} {% ENDFOR %} </div> <div class="LRcatalogbutton">Каталог</div> <div class="LRcatalog"> {%FOR catalog_full%} {% IF catalog_full.FIRST %}<ul class="accordion2">{% ENDIF %} <li {% IF catalog_full.HIDE %}style="display:none;"{% ENDIF %} class="{% IF catalog_full.ISSET_SUB %}parent{% ENDIF %}{% IF catalog_full.CURRENT %} active{% ELSEIF catalog_full.CURRENT_PARENT %} active{% ENDIF %}"> <a href="{catalog_full.URL}" {% IF catalog_full.CURRENT %}class="selected"{% 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%} </div>
замените на:
<div class="fixed"> <div class="LRmenubutton">Меню</div> <div class="LRmenucont"> {% FOR menu %} {% FOR header %} {% FOR links %} <a class="menuparent {% IF menu.header.links.SELECTED %}selected{%ENDIF%}" href="{menu.header.links.URL}" {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a> {% ENDFOR %} {% ENDFOR %} {% ENDFOR %} </div> <div class="LRcatalogbutton">Каталог</div> <div class="LRcatalog"> {%FOR catalog_full%} {% IF catalog_full.FIRST %}<ul class="accordion2">{% ENDIF %} <li {% IF catalog_full.HIDE %}style="display:none;"{% ENDIF %} class="{% IF catalog_full.ISSET_SUB %}parent{% ENDIF %}{% IF catalog_full.CURRENT %} active{% ELSEIF catalog_full.CURRENT_PARENT %} active{% ENDIF %}"> <a href="{catalog_full.URL}" {% IF catalog_full.CURRENT %}class="selected"{% 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%} </div> </div>
В main.css найдите:
.LRcatalogClickWrp { background: #015B73; }
после него пропишите:
.LRmenu .fixed { position: fixed; width: 75%; }
6. Возможно вы имели ввиду горизонтальное положение? Так как страница намного шире остальных.
#3
Отправлено 27 Март 2016 - 02:28
Vaccina (26 Март 2016 - 03:44) писал:
#4
Отправлено 27 Март 2016 - 10:10
Lis (27 Март 2016 - 02:28) писал:
Здравствуйте.
Создал Вам бэкап 27.03.2016 09:37:30 и внес изменения.
Проверьте, пожалуйста.
#6
Отправлено 30 Май 2016 - 15:15
#7
Отправлено 30 Май 2016 - 18:59
osdty (30 Май 2016 - 15:15) писал:
Здравствуйте.
За логотип в мобильной версии отвечает строка кода в шаблоне HTML:
<a href="http://{NET_DOMAIN}" class="logoLR"><img src="{ASSETS_IMAGES_PATH}logo.png?design=caramel"/></div></a>
Вам необходимо загрузить свое изображение с названием logo.png в редакторе шаблонов по кнопке "Добавить файлы". Стандартное изображение имеет размер 600x300px.
#8
Отправлено 15 Ноябрь 2016 - 12:09
По поводу пятой просьбы пользователя Lis в начале темы (если прокрутить страницу вниз и вызвать боковое меню, то открывается пустое поле, из-за того что меню тоже прокручивается вместе со страницей (фото5). Можно его как-то зафиксировать?)
Сделала то, что вы написали. А теперь вообще меню уехало вправо, а пустое место под меню осталась.. уж лучше как было... Совсем беда. Может как-то убрать вообще это поле? И скажите, а можно сделать, чтобы при движении пальцем по экрану справа налево эта шторка убиралась (или это совсем из разряда фантастики)?
#9
Отправлено 17 Ноябрь 2016 - 13:23
Василиса (15 Ноябрь 2016 - 12:09) писал:
По поводу пятой просьбы пользователя Lis в начале темы (если прокрутить страницу вниз и вызвать боковое меню, то открывается пустое поле, из-за того что меню тоже прокручивается вместе со страницей (фото5). Можно его как-то зафиксировать?)
Сделала то, что вы написали. А теперь вообще меню уехало вправо, а пустое место под меню осталась.. уж лучше как было... Совсем беда. Может как-то убрать вообще это поле? И скажите, а можно сделать, чтобы при движении пальцем по экрану справа налево эта шторка убиралась (или это совсем из разряда фантастики)?
Насколько я вижу сейчас меню на мобильном устройстве отображается корректно.
Для добавления движения по шторке добавил:
Загрузил скрипт jquery.touchSwipe.js
В файл HTML
после
<script type="text/javascript" src="{ASSETS_JS_PATH}main.js?design=caramel"></script>добавил
<script type="text/javascript" src="{ASSETS_JS_PATH}jquery.touchSwipe.js"></script>после
<body>добавил
<div class="swipe-block"></div>В файл main.css добавил
.swipe-block {z-index:199; content: ''; display:block; position: fixed; top:0; left:0px; height:100%; width:60px; background: #000; opacity:0;}
В файл main.js добавил
// Cвайп меню $(window).load(function(){ $('.swipe-block').swipe({ swipeStatus:function(event, phase, direction, distance, duration, fingers) { if (phase=="move" && direction =="right") { $(".container").addClass("open-sidebar"); $('.LRmenu').show(); return false; } if (phase=="move" && direction =="left") { $(".container").removeClass("open-sidebar"); $('.LRmenu').hide(); return false; } } }); $('body').swipe({ swipeStatus:function(event, phase, direction, distance, duration, fingers) { if (phase=="move" && direction =="left") { $(".container").removeClass("open-sidebar"); $('.LRmenu').hide(); return false; } } }); });
#10
Отправлено 16 Январь 2017 - 09:46
Подскажите что нужно изменить.
Что бы в карточке заказа, которая прилетает на почту покупателю.
Отображалась фотография заказанного товара.
в Позициях заказа....как в администрирывании.
http://go-gostrip.ru/
#11
Отправлено 01 Апрель 2017 - 10:53
Наталья112 (16 Январь 2017 - 09:46) писал:
Подскажите что нужно изменить.
Что бы в карточке заказа, которая прилетает на почту покупателю.
Отображалась фотография заказанного товара.
в Позициях заказа....как в администрирывании.
http://go-gostrip.ru/
Приносим свои извинения, за длительное ожидание ответа.
К сожалению, вывести изображение в письме не получится.
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных