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

Александр86 (25 Январь 2016 - 13:26) писал:

Здравствуйте. В шаблоне main.css после строк:

@media all and (max-width: 991px) {
  .form-search-header {display:none;}

вставьте:

.header_phone {margin-top: 20px;}

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

Александр86 (26 Январь 2016 - 20:50) писал:

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

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.

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

Александр86 (27 Январь 2016 - 15:14) писал:

Здравствуйте, перед изменениями создайте бекап. Попробуйте в шаблоне 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;
}

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


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

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

Александр86 (28 Январь 2016 - 10:53) писал:

Чтобы подправить изображение товаров, в 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;
}

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



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

Отлично)да)

Александр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;
}

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

Александр86 (28 Январь 2016 - 12:59) писал:

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



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

Чтобы поправить кнопку "Заказать", в 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;
}

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