Мобильная Версия
#1
Отправлено 22 Октябрь 2015 - 00:03
1) настройте пожалуйста слайдер в мобильной версии, нужно сделать его нормальным размером и чтобы он показывался полностью не заслоняя банер (скриншот во вложении)
2) Нужно передвинуть корзину в место указанное на скриншоте
3) поменять цвет иконки поиска на черный (только в мобильной версии)
#2
Отправлено 22 Октябрь 2015 - 13:25
#3
Отправлено 23 Октябрь 2015 - 01:57
.slides_container { width: 550px; height: 262px; } .slides_container img { width: 500px !important; height: 262px !important; }2. В main.css после:
@media all and (max-width: 330px) {вставьте:
#header .header-top-right .header-right-mobile { float: right; top: 315px; right: 0px; position: absolute; }3. После изменений из 2го пункта добавьте:
.header-top .header-top-right #search_mini_form2 .form-search .button { background-color: #000; }
Результат должен быть следующим:
#4
Отправлено 23 Октябрь 2015 - 10:51
Vaccina (23 Октябрь 2015 - 01:57) писал:
.slides_container { width: 550px; height: 262px; } .slides_container img { width: 500px !important; height: 262px !important; }2. В main.css после:
@media all and (max-width: 330px) {вставьте:
#header .header-top-right .header-right-mobile { float: right; top: 315px; right: 0px; position: absolute; }3. После изменений из 2го пункта добавьте:
.header-top .header-top-right #search_mini_form2 .form-search .button { background-color: #000; }
Результат должен быть следующим:
FireShot Screen Capture #180 - 'Мы рады видеть Вас!' - a-nfy_ru.jpg
@media all and (max-width: 1200px) {
#slider, #slider > div {
width: 100% !important;
}
}
1)я убрал этот код и только после этого слайдер в мобильной версии встал нормально, но при этом изменился слайдер в полной версии сайта, он стал гораздо меньше!
2) корзина не изменила свое положение, также осталась в верху
#5
Отправлено 23 Октябрь 2015 - 11:04
#6
Отправлено 23 Октябрь 2015 - 17:07
Vovan (23 Октябрь 2015 - 10:51) писал:
#slider, #slider > div {
width: 100% !important;
}
}
1)я убрал этот код и только после этого слайдер в мобильной версии встал нормально, но при этом изменился слайдер в полной версии сайта, он стал гораздо меньше!
2) корзина не изменила свое положение, также осталась в верху
Здравствуйте.
По первому пункту - мы разберемся и пришлем Вам инструкции позже.
По второму пункту. Если я Вас правильно поняла, то корзина должна изменять свое положение только в мобильной версии, так? Тогда выполните пункт 2 из сообщения №3, а так же в main.css после кода
@media all and (max-width: 480px) {
добавьте код:
#header .header-top-right .header-right-mobile { float: right; top: 297px; right: 0px; position: absolute; }
#7
Отправлено 23 Октябрь 2015 - 17:20
Vovan (23 Октябрь 2015 - 10:51) писал:
#slider, #slider > div {
width: 100% !important;
}
}
1)я убрал этот код и только после этого слайдер в мобильной версии встал нормально, но при этом изменился слайдер в полной версии сайта, он стал гораздо меньше!
2) корзина не изменила свое положение, также осталась в верху
По первому пункту. Добавьте в main.css код:
.slides_container { width: 550px; height: 262px; } .slides_container img { width: 500px !important; height: 262px !important; }
после кода:
@media all and (max-width: 991px) {
И удалите код
@media all and (max-width: 1200px) { #slider, #slider > div { width: 100% !important; } }
#8
Отправлено 23 Октябрь 2015 - 20:39
Юля123 (23 Октябрь 2015 - 17:20) писал:
.slides_container { width: 550px; height: 262px; } .slides_container img { width: 500px !important; height: 262px !important; }
после кода:
@media all and (max-width: 991px) {
И удалите код
@media all and (max-width: 1200px) { #slider, #slider > div { width: 100% !important; } }
Все отлично, только вот хотелось бы чтоб сайт четко адаптировался по размерам (проблема 1), уменьшить расстояние между слайдером и блоком преимуществ (проблема 2)
#9
Отправлено 24 Октябрь 2015 - 02:18
.container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; }замените на:
.container { margin-right: auto; margin-left: auto; }
2. В main.css после:
@media all and (max-width: 330px) {
вставьте:
#slider { height: 107px !important; }
#10
Отправлено 24 Октябрь 2015 - 11:00
Vaccina (24 Октябрь 2015 - 02:18) писал:
.container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; }замените на:
.container { margin-right: auto; margin-left: auto; }
2. В main.css после:
@media all and (max-width: 330px) {
вставьте:
#slider { height: 107px !important; }
попробовал и не помогло, расстояние осталось таким же, щель сбоку такая же, уменьшился только слайдер! на данный сделал бекап
#11
Отправлено 25 Октябрь 2015 - 23:55
#12
Отправлено 26 Октябрь 2015 - 11:12
#13
Отправлено 26 Октябрь 2015 - 11:58
Vovan (24 Октябрь 2015 - 11:00) писал:
Здравствуйте, попробуйте следующее:
1) зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css и найдите код
@media all and (max-width: 611px) {
после него добавьте:
div#slider { height: 200px !important; }
2) далее найдите код
@media all and (max-width: 480px) {
после него добавьте
div#slider { height: 150px !important; }3) и наконец, найдите код
@media all and (max-width: 330px) {
и после него добавьте код
div#slider { height: 112px !important; }
#14
Отправлено 26 Октябрь 2015 - 13:33
Юля123 (26 Октябрь 2015 - 11:58) писал:
1) зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css и найдите код
@media all and (max-width: 611px) {
после него добавьте:
div#slider { height: 200px !important; }
2) далее найдите код
@media all and (max-width: 480px) {
после него добавьте
div#slider { height: 150px !important; }3) и наконец, найдите код
@media all and (max-width: 330px) {
и после него добавьте код
div#slider { height: 112px !important; }
спасибо все классно
#15
Отправлено 29 Март 2016 - 15:35
Возможно ли убрать изображение из шапки в мобильной версии и просто прописать название и телефон, или создать новую шапку меньшего размера только для мобильной версии.
а то яндекс ругается, сайт не адаптирован для моб
Аккаунт SL-311500
#16
Отправлено 29 Март 2016 - 16:12
aleff (29 Март 2016 - 15:35) писал:
Возможно ли убрать изображение из шапки в мобильной версии и просто прописать название и телефон, или создать новую шапку меньшего размера только для мобильной версии.
а то яндекс ругается, сайт не адаптирован для моб
Аккаунт SL-311500
Здравствуйте, такой вид Вас устроит?
если да, тогда в шаблоне HTML найдите код:
<!-- Логотип --> <div class="logo col-lg-3 col-md-2 col-xs-12"> <a title="{SETTINGS_STORE_NAME}" href="http://{NET_DOMAIN}/"> <img alt="{SETTINGS_STORE_NAME}" src="{ASSETS_IMAGES_PATH}Header.png" alt="" title="" width="1200" height="110"> </a> </div>
после него добавьте код:
<div class="mobContact col-xs-12"> {% IF SETTINGS_STORE_PHONE_NUMBER1 %}<p>Телефон : {SETTINGS_STORE_PHONE_COUNTRY_CODE1}({SETTINGS_STORE_PHONE_CITY_CODE1}){SETTINGS_STORE_PHONE_NUMBER1}</p>{% ENDIF %} {% IF SETTINGS_STORE_PHONE_NUMBER2 %}<p>Телефон : {SETTINGS_STORE_PHONE_COUNTRY_CODE2}({SETTINGS_STORE_PHONE_CITY_CODE2}){SETTINGS_STORE_PHONE_NUMBER2}</p>{% ENDIF %} {% IF SETTINGS_STORE_PHONE_NUMBER3 %}<p>Телефон : {SETTINGS_STORE_PHONE_COUNTRY_CODE3}({SETTINGS_STORE_PHONE_CITY_CODE3}){SETTINGS_STORE_PHONE_NUMBER3}</p>{% ENDIF %} </div>
в main.css после кода:
@media all and (max-width: 480px) {
добавьте код:
.logo { display: none; } .button-navbar.btn-navbar { display: block; right: 0; top: 0; } .mobContact { margin: 0 auto; text-align: center; margin-top: 20px; } .mobContact { text-align: center; padding: 10px 0; } #header .header-top-right .header-right-mobile {left:0;top:140px;}
после кода:
@media all and (min-width:480px){
добавьте код:
.mobContact{display:none;}
#17
Отправлено 29 Март 2016 - 16:36
#18
Отправлено 29 Март 2016 - 16:48
aleff (29 Март 2016 - 16:36) писал:
Добавьте картинку в редакторе шаблонов в левом боковом меню, и укажите на скриншоте куда его добавить, мы поможем с установкой.
#19
Отправлено 29 Март 2016 - 18:41
#20
Отправлено 30 Март 2016 - 04:41
<div class="row"> <!-- Основное меню --> <div class="header-top-left col-lg-9 col-md-9 col-sm-6 col-xs-12">
после него разместите:
<a class="mob_logo" style="display:none;" title="{SETTINGS_STORE_NAME}" href="http://{NET_DOMAIN}/"> <img alt="{SETTINGS_STORE_NAME}" src="{ASSETS_IMAGES_PATH}logo1.png" /> </a>
В main.css найдите:
@media all and (max-width: 480px) {
после него пропишите:
.mob_logo{ display:block !important; float:right; } .mob_logo img{ width:70%; height:auto; }
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных