Отключен JavaScript

У вас отключен JavaScript. Некоторые возможности системы не будут работать. Пожалуйста, включите JavaScript для получения доступа ко всем функциям.

2

Некорректное Отображение Сайта На Маленьких Экранах

Автор Funtik, 13 июля 2014 15:49

Назад

Вперед

Авторизуйтесь для ответа в теме

Сообщений в теме: 78

#41 Vaccina

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

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

Отправлено 17 Январь 2015 - 01:41

Попробуйте следующее, в style.css найдите:

.nav-container .menu_block_dropdown {
	display: block;
}

замените на:

.nav-container .menu_block_dropdown {
	display: block;
	margin: 0 auto;
	width: 50%;
}

на счет слайдера немного не понятно, в другой теме вы хотели перенести его

Наверх

#42 vanyushka

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

Пользователи
500 сообщений

Отправлено 17 Январь 2015 - 10:07

Vaccina (17 Январь 2015 - 01:41) писал:

Попробуйте следующее, в style.css найдите:

.nav-container .menu_block_dropdown {
display: block;
}

замените на:

.nav-container .menu_block_dropdown {
display: block;
margin: 0 auto;
width: 50%;
}

на счет слайдера немного не понятно, в другой теме вы хотели перенести его

Мне там долго не отвечали и за это время я понял, что переносить слайдер в этом шаблоне плохая идея.
По поводу предложенных Вами изменений в style.css: слайдер и меню после изменений встали криво на отображении стандартных мониторов, а этого быть не должно. Для стандартных мониторов сайт хорошо подогнан и ничего менять не надо. Я сейчас парюсь с отображением на планшетах, по-этому прошу помощи в этой области. Спасибо

Наверх

#43 vanyushka

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

Пользователи
500 сообщений

Отправлено 19 Январь 2015 - 17:13

Alekseys (16 Январь 2015 - 16:39) писал:

В шаблоне HTML удалите строку

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Теперь хорошо выглядит на планшете. Помогите отцентровать полосу "Оплата, Доставка, Гарантии" и увеличить слайдер в высоту (изображения слайдов чуть перекрывает шапка). Спасибо

Наверх

#44 Alekseys

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

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

Отправлено 19 Январь 2015 - 17:52

ipodushkin (19 Январь 2015 - 17:13) писал:

Теперь хорошо выглядит на планшете. Помогите отцентровать полосу "Оплата, Доставка, Гарантии" и увеличить слайдер в высоту (изображения слайдов чуть перекрывает шапка). Спасибо

В main.css в блок

@media only screen and (max-width: 1200px) and (min-width: 960px)

добавьте

.cameraSlide {
padding-top: 25px;
}

в блоке

@media only screen and (max-width: 959px) and (min-width: 768px)

замените

.fluid-container {
position: relative;
height: 400px;
padding-top: 60px;
}

на

.fluid-container {
position: relative;
height: 455px;
padding-top: 60px;
}

затем в блок

@media only screen and (max-width: 1200px) and (min-width: 960px)

добавьте

.promo_block {
width: 740px!important;
}
.promo_block li {
padding-left: 55px;
width: 135px;
padding-right: 15px;
}

Наверх

#45 vanyushka

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

Пользователи
500 сообщений

Отправлено 20 Январь 2015 - 17:21

Спасибо! Помогите пожалуйста убрать в слайдере кнопку "плей/пауза" и круг загрузки слайдера рядом с шапкой

Наверх

#46 Alekseys

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

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

Отправлено 20 Январь 2015 - 17:48

ipodushkin (20 Январь 2015 - 17:21) писал:

Спасибо! Помогите пожалуйста убрать в слайдере кнопку "плей/пауза" и круг загрузки слайдера рядом с шапкой

Здравствуйте. В style.css добавьте

.camera_commands {
display: none;
}
.camera_pie {
display: none;
}

Наверх

#47 vanyushka

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

Пользователи
500 сообщений

Отправлено 20 Январь 2015 - 17:55

Alekseys (20 Январь 2015 - 17:48) писал:

Здравствуйте. В main.css добавьте

.camera_commands {
display: none;
}
.camera_pie {
display: none;
}

Попробовал - не получается. Все равно показывается

Наверх

#48 Alekseys

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

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

Отправлено 20 Январь 2015 - 18:01

ipodushkin (20 Январь 2015 - 17:55) писал:

Попробовал - не получается. Все равно показывается

Данный код нужно добавить в конец style.css

Наверх

#49 vanyushka

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

Пользователи
500 сообщений

Отправлено 20 Январь 2015 - 19:14

Alekseys (20 Январь 2015 - 18:01) писал:

Данный код нужно добавить в конец style.css

Спасибо! Первый раз криво вставил)
Кружок загрузки слайдера, который вы помогли убрать (справа от шапки) занимал место (белую область). Из-за этого левый отступ от края экрана до шапки и с правого края до шапки были разные. Ну я так думал)

Кароче говоря, как сделать равными отступы от краев шапки справа и слева? Справа почти в два раза больше выглядит. Спасибо

Наверх

#50 Alekseys

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

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

Отправлено 20 Январь 2015 - 19:29

ipodushkin (20 Январь 2015 - 19:14) писал:

Спасибо! Первый раз криво вставил)
Кружок загрузки слайдера, который вы помогли убрать (справа от шапки) занимал место (белую область). Из-за этого левый отступ от края экрана до шапки и с правого края до шапки были разные. Ну я так думал)

Кароче говоря, как сделать равными отступы от краев шапки справа и слева? Справа почти в два раза больше выглядит. Спасибо

В style.css замените

.home #header {
height: auto;
text-align: left;
position: absolute;
background: none;
z-index: 1000;
left: 50%;
margin-left: -600px;
}

на

.home #header {
height: auto;
text-align: left;
background: none;
z-index: 1000;
}

затем удалите

.home #header {
margin-left: -480px;
}

.home #header {
margin-left: -384px;
}

.home #header {
margin-left: -220px;
}

.home #header {
margin-left: -150px;
}

Наверх

#51 vanyushka

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

Пользователи
500 сообщений

Отправлено 20 Январь 2015 - 19:40

Alekseys (20 Январь 2015 - 19:29) писал:

В style.css замените

.home #header {
height: auto;
text-align: left;
position: absolute;
background: none;
z-index: 1000;
left: 50%;
margin-left: -600px;
}

на

.home #header {
height: auto;
text-align: left;
background: none;
z-index: 1000;
}

затем удалите

.home #header {
margin-left: -480px;
}

.home #header {
margin-left: -384px;
}

.home #header {
margin-left: -220px;
}

.home #header {
margin-left: -150px;
}

Получилось, только слайдер вниз уехал

Наверх

#52 Alekseys

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

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

Отправлено 20 Январь 2015 - 20:21

ipodushkin (20 Январь 2015 - 19:40) писал:

Получилось, только слайдер вниз уехал

В style.css замените

.fluid-container {
position: relative;
height: 600px;
}

на

.fluid-container {
position: relative;
height: 600px;
margin-top: -170px!important;
}

добавьте в блоке

@media only screen and (max-width: 1200px) and (min-width: 960px)

код

.camera_wrap img {
margin-top: -10px!important;
}

затем

.fluid-container {
position: relative;
height: 380px;
}

замените на

.fluid-container {
position: relative;
height: 380px;
margin-top: -120px!important;
}

Наверх

#53 vanyushka

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

Пользователи
500 сообщений

Отправлено 20 Январь 2015 - 21:28

Alekseys (20 Январь 2015 - 20:21) писал:

В style.css замените

.fluid-container {
position: relative;
height: 600px;
}

на

.fluid-container {
position: relative;
height: 600px;
margin-top: -170px!important;
}

добавьте в блоке

@media only screen and (max-width: 1200px) and (min-width: 960px)

код

.camera_wrap img {
margin-top: -10px!important;
}

затем

.fluid-container {
position: relative;
height: 380px;
}

замените на

.fluid-container {
position: relative;
height: 380px;
margin-top: -120px!important;
}

На мониторах хорошо, но вот что на планшете:

Наверх

#54 vanyushka

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

Пользователи
500 сообщений

Отправлено 23 Январь 2015 - 11:14

Help! Такое отображение на андройд в файрфоксе, но в других браузерах все ок. На яблотехнике в сафари тоже все ок

Наверх

#55 Ирина345

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

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

Отправлено 23 Январь 2015 - 11:32

ipodushkin (23 Январь 2015 - 11:14) писал:

Help! Такое отображение на андройд в файрфоксе, но в других браузерах все ок. На яблотехнике в сафари тоже все ок

Здравствуйте,
добавьте в конец файла style.css

.container.promo_block {
height: 125px;
background: none;
}

Наверх

#56 vanyushka

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

Пользователи
500 сообщений

Отправлено 28 Январь 2015 - 20:09

Такая проблема: в каталоге при наведении курсором на товар вываливается вертикальное белое окно с фотографиями. Это возникает только у товаров, у которых 2 и более фотографий. Вот скрин:

Наверх

#57 Ирина345

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

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

Отправлено 28 Январь 2015 - 20:15

ipodushkin (28 Январь 2015 - 20:09) писал:

Такая проблема: в каталоге при наведении курсором на товар вываливается вертикальное белое окно с фотографиями. Это возникает только у товаров, у которых 2 и более фотографий. Вот скрин:

Найдите в style.css

.preview .col-1 {
width: 75px;
}

замените на


.preview .col-1 {
width: 67px;
}

Наверх

#58 vanyushka

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

Пользователи
500 сообщений

Отправлено 28 Январь 2015 - 20:19

Ирина345 (28 Январь 2015 - 20:15) писал:

Найдите в style.css

.preview .col-1 {
width: 75px;
}

замените на


.preview .col-1 {
width: 67px;
}

Окно стало меньше, но не исчезло. Можно вообще его убрать?

Наверх

#59 Alekseys

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

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

Отправлено 28 Январь 2015 - 20:34

ipodushkin (28 Январь 2015 - 20:19) писал:

Окно стало меньше, но не исчезло. Можно вообще его убрать?

Здравствуйте. Чтобы совсем убрать это окно в main.css замените

.preview {
position: absolute !important;
z-index: 2000;
top: 0;
left: -80px !important;
display: none;
overflow: hidden;
float: left;
text-align: left;
padding: 5px;
background-color: #fff;
border: solid 1px #ccc;
}

на

.preview {
position: absolute !important;
z-index: 2000;
top: 0;
left: -80px !important;
display: none!important;
overflow: hidden;
float: left;
text-align: left;
padding: 5px;
background-color: #fff;
border: solid 1px #ccc;
}

Наверх

#60 vanyushka

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

Пользователи
500 сообщений

Отправлено 28 Январь 2015 - 20:53

Alekseys (28 Январь 2015 - 20:34) писал:

Здравствуйте. Чтобы совсем убрать это окно в main.css замените

.preview {
position: absolute !important;
z-index: 2000;
top: 0;
left: -80px !important;
display: none;
overflow: hidden;
float: left;
text-align: left;
padding: 5px;
background-color: #fff;
border: solid 1px #ccc;
}

на

.preview {
position: absolute !important;
z-index: 2000;
top: 0;
left: -80px !important;
display: none!important;
overflow: hidden;
float: left;
text-align: left;
padding: 5px;
background-color: #fff;
border: solid 1px #ccc;
}

Спасибо! Помогите пожалуйста еще. В каталоге при установке фильтра по товарам у меня возникает беспорядок, вот такой: