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


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


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

#21 RedHead

RedHead

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

  • Модератоpы
  • 1 052 сообщений

Отправлено 26 Январь 2016 - 09:57

Просмотр сообщенияАлександр86 (25 Январь 2016 - 13:26) писал:

Спасибо помогло)
Еще при изменениях в полной версии в мобильно немного спустился блок каталог, наезжает на телефон, возможно исправить?

Здравствуйте. В шаблоне main.css после строк:
@media all and (max-width: 991px) {
  .form-search-header {display:none;}
вставьте:
.header_phone {margin-top: 20px;}


#22 Александр86

Александр86

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

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

Отправлено 26 Январь 2016 - 20:50

Спасибо получилось)только теперь блок каталог выглядит большим, а предыдущих строк div#mommenu не могу найти, вроде меняли там( не поможете? Еще что касаемо изменений, нельзя ли сделать на главной и хиты продаж в одну строку, шрифты вроде уменьшил, а не получается вывести в одну ( И по поводу всех отображений, все же неудобно листать все товары в мобильной версии, возможно их как то вообще уменьшить и вывести как в основной версии сайта, пусть даже будет плохо видно, или допустим сделать переход в полную версию сайта?
Спасибо большое за помощь и терпение)

#23 Юля123

Юля123

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

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

Отправлено 27 Январь 2016 - 09:13

Просмотр сообщенияАлександр86 (26 Январь 2016 - 20:50) писал:

Спасибо получилось)только теперь блок каталог выглядит большим, а предыдущих строк div#mommenu не могу найти, вроде меняли там( не поможете? Еще что касаемо изменений, нельзя ли сделать на главной и хиты продаж в одну строку, шрифты вроде уменьшил, а не получается вывести в одну ( И по поводу всех отображений, все же неудобно листать все товары в мобильной версии, возможно их как то вообще уменьшить и вывести как в основной версии сайта, пусть даже будет плохо видно, или допустим сделать переход в полную версию сайта?
Спасибо большое за помощь и терпение)


Здравствуйте,

1) Блок "Каталог", в main.css найдите код:

#mommenu {display: none;background-color: #4169E1;border-radius: 0;margin: 10px 0 0;min-height: 50px;position: relative;}


В этом коде изменяйте значение свойства min-height: 50px; до нужного Вам.


2) На главной и Хиты продаж в одну строку, в main.css после кода:


@media all and (max-width: 481px) {


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


#producttabs .pdt-nav li {
	display: inline-block !important;
	width: 48% !important;
}


3) Отображение товаров. Можно попробовать вывести по 2 в строчку, но при этом никакой информации о товаре (название, цена) почти не будет видно. Можно отключить вообще мобильную версию, чтобы на мобильных устройствах отображалось так же как на компьютере с разрешением, например, 1200px.

#24 Александр86

Александр86

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

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

Отправлено 27 Январь 2016 - 15:14

Спасибо,помогло,то,что хотел) А по поводу товаров, давайте попробуем сделать по 2)Хотя бы посмотреть как оно будет)

#25 Юля123

Юля123

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

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

Отправлено 27 Январь 2016 - 20:47

Просмотр сообщенияАлександр86 (27 Январь 2016 - 15:14) писал:

Спасибо,помогло,то,что хотел) А по поводу товаров, давайте попробуем сделать по 2)Хотя бы посмотреть как оно будет)


Здравствуйте, перед изменениями создайте бекап. Попробуйте в шаблоне HTML все коды (3 таких строчки):

<div class="item col-sm-4 col-sms-6 col-smb-12 effect-bounceIn">

заменить на код:

<div class="item col-sm-4 col-sms-6 col-smb-6 effect-bounceIn">


Далее в main.css  код:


.products-grid .item .item-inner .item-img > a {display: block;margin: 0 auto;}

замените на код:


.products-grid .item .item-inner .item-img > a {
z-index: 1;
vertical-align: middle;
height: 148px !important;
width: 128px !important;
}


Сейчас эти изменения касаются только товаров на главной. Если Вас устроят такие изменения, то тоже самое сделаем и в каталоге.


Примерно выглядеть будет так:

QIP Shot - Screen 145.png

#26 Александр86

Александр86

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

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

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

Отлично, то что надо)потом же можно будет поправить название и цену? И еще только 3 и 4 товар на главной расположились неравномерно( И тогда можно будет со всеми товарами такое проделать?

#27 Юля123

Юля123

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

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

Отправлено 28 Январь 2016 - 11:06

Просмотр сообщенияАлександр86 (28 Январь 2016 - 10:53) писал:

Отлично, то что надо)потом же можно будет поправить название и цену? И еще только 3 и 4 товар на главной расположились неравномерно( И тогда можно будет со всеми товарами такое проделать?

Чтобы подправить изображение товаров, в Main.css код:

.products-grid .item .item-inner .item-img > a {
z-index: 1;
vertical-align: middle;
height: 148px !important;
width: 128px !important;
}

замените на код:

.products-grid .item .item-inner .item-img > a {
z-index: 1;
display:block !important;
vertical-align: middle;
height: 148px !important;
width: 128px !important;
}

подправим отображение цены, для этого код:

p.special-price {
	 width: 55%;
	 float: right;
}

замените на код:

p.special-price {
	 width: 83%;
	 float: right;
}
span.price {
font-size: 12px !important;
}

.products-grid .item .item-inner .item-info {
padding: 5px !important;
}

.products-grid .item .item-inner .price-box-new {
margin: -4px !important;
}


.products-grid .item .item-inner .product-name-new a {
font-size: 12px !important;
}

должно получится так:

QIP Shot - Screen 146.png

Изменяем в каталоге?

#28 Александр86

Александр86

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

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

Отправлено 28 Январь 2016 - 11:18

Отлично)да)

#29 Юля123

Юля123

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

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

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

Просмотр сообщенияАлександр86 (28 Январь 2016 - 11:18) писал:

Отлично)да)


В шаблоне Товары найдите код (встречается 2 раза, нужно применить изменения для обеих строчек):

<div class="item col-sm-4 col-sms-6 col-smb-12">

замените на код:

<div class="item col-sm-4 col-sms-6 col-smb-6">


затем в main.css  код:

.price-box {
		width: 60% !important;
		float: right !important;
}

замените на код:


.price-box {
width: 60% !important;
	float: right !important;
	text-align: right;
	margin-top: -4px;
}
.products-grid .item .item-inner .product-name a {
	font-size: 12px !important;
}


дальше код:

.products-grid .item .item-inner .product-name-new a {
font-size: 12px !important;
}

замените на код:

.products-grid .item .item-inner .product-name-new a {
font-size: 12px !important;
width:100% !important;
}


#30 Александр86

Александр86

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

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

Отправлено 28 Январь 2016 - 12:59

Спасибо, картинки товаров уменьшились, но осталось пустое место справа, где должен быть второй товар( И кнопка заказать во весь экран(

#31 Юля123

Юля123

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

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

Отправлено 28 Январь 2016 - 13:28

Просмотр сообщенияАлександр86 (28 Январь 2016 - 12:59) писал:

Спасибо, картинки товаров уменьшились, но осталось пустое место справа, где должен быть второй товар( И кнопка заказать во весь экран(

До изменений у Вас сайт отображается вот так:

QIP Shot - Screen 147.png

если у Вас не так, то очистите кеш.

Чтобы поправить кнопку "Заказать", в main.css добавьте код (для мобильной версии):

.products-grid .item .item-inner .actions .add-cart.button {
	width: 100% !important;
}

а затем, чтобы поправить отображение изображений товаров, код:

.products-grid .item .item-inner .item-img > a {
z-index: 1;
display:block !important;
vertical-align: middle;
height: 148px !important;
width: 128px !important;
}

замените на код:

.products-grid .item .item-inner .item-img > a {
z-index: 1;
display:block !important;
vertical-align: middle;
height: 148px !important;
width: 100% !important;
}


#32 Александр86

Александр86

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

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

Отправлено 28 Январь 2016 - 22:38

Спасибо большое!То,что надо вы мне очень помогли)))




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

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