Отключен JavaScript

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

0

Увеличенные Фото В 3 Столбца

Автор Osashop, 19 окт. 2014 22:04

Увеличенные фото в 3 столбца

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

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

#1 Osashop

Пользователь

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

Отправлено 19 Октябрь 2014 - 22:04

Добрый день, как можно укрупнить фото товара и сделать не в 4 столбца,а в 3 ? Сейчас фото маленькие,именно на этой странице в каталоге http://kind-kazan.st...ostelnogo-belya .

Наверх

#2 Danil

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

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

Отправлено 19 Октябрь 2014 - 22:13

Osashop (19 Октябрь 2014 - 22:04) писал:

Добрый день, как можно укрупнить фото товара и сделать не в 4 столбца,а в 3 ? Сейчас фото маленькие,именно на этой странице в каталоге http://kind-kazan.st...ostelnogo-belya .

Здравствуйте.
Попробуйте такой вариант.
В style.css найдите код

#category_view_type.grid_view #product_list .product_image {
max-width: 184px;
margin: auto;
height: auto;
z-index: 1;
}

И замените на

#category_view_type.grid_view #product_list .product_image {
max-width: 100%;
margin: auto;
height: auto;
z-index: 1;
}

Так же найдите код

#category_view_type.grid_view #product_list li {
display: inline-block;
display: -moz-inline-stack;
position: relative;
width: 200px;
min-height: 250px;
margin: 0 15px;
padding: 0;
border: 0;
vertical-align: top;
text-align: center;
z-index: 100;
}

И замените на

#category_view_type.grid_view #product_list li {
display: inline-block;
display: -moz-inline-stack;
position: relative;
width: 287px;
min-height: 250px;
margin: 0 15px;
padding: 0;
border: 0;
vertical-align: top;
text-align: center;
z-index: 100;
}

Наверх

#3 Osashop

Пользователь

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

Отправлено 20 Октябрь 2014 - 15:14

Спасибо,помогло)

Наверх

#4 Osashop

Пользователь

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

Отправлено 20 Октябрь 2014 - 19:07

а как сделать в 2 столбца?

и фото крупнее

Наверх

#5 RayLi

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

Модераторы
2 864 сообщений

Отправлено 20 Октябрь 2014 - 19:16

Osashop (20 Октябрь 2014 - 19:07) писал:

а как сделать в 2 столбца?

и фото крупнее

Здравствуйте.
Найдите код в шаблоне style.css :

#category_view_type.grid_view #product_list li {
display: inline-block;
display: -moz-inline-stack;
position: relative;
width: 287px;
min-height: 250px;
margin: 0 15px;
padding: 0;
border: 0;
vertical-align: top;
text-align: center;
z-index: 100;
}

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

#category_view_type.grid_view #product_list li {
display: inline-block;
display: -moz-inline-stack;
position: relative;
width: 310px;
min-height: 250px;
margin: 0 15px;
padding: 0;
border: 0;
vertical-align: top;
text-align: center;
z-index: 100;
}

Наверх

#6 Osashop

Пользователь

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

Отправлено 20 Октябрь 2014 - 19:25

RayLi (20 Октябрь 2014 - 19:16) писал:

Здравствуйте.
Найдите код в шаблоне style.css :

#category_view_type.grid_view #product_list li {
display: inline-block;
display: -moz-inline-stack;
position: relative;
width: 287px;
min-height: 250px;
margin: 0 15px;
padding: 0;
border: 0;
vertical-align: top;
text-align: center;
z-index: 100;
}

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

#category_view_type.grid_view #product_list li {
display: inline-block;
display: -moz-inline-stack;
position: relative;
width: 310px;
min-height: 250px;
margin: 0 15px;
padding: 0;
border: 0;
vertical-align: top;
text-align: center;
z-index: 100;
}

Сделал, получилось два столбца, а как увеличить фото? чтоб было по всей ширине?

Наверх

#7 Alekseys

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

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

Отправлено 20 Октябрь 2014 - 19:31

Osashop (20 Октябрь 2014 - 19:25) писал:

Сделал, получилось два столбца, а как увеличить фото? чтоб было по всей ширине?

Здравствуйте. В style.css замените

#category_view_type.grid_view #product_list .product_image_wrapper {
position: relative;
padding: 8px;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
box-shadow: 0 0 0 1px rgba(0,0,0,0.095) ,0 1.5px 1.5px 0 rgba(0,0,0,0.2),0 2px 1.5px 0 rgba(0,0,0,0.1);
-moz-box-shadow: 0 0 0 1px rgba(0,0,0,0.095) ,0 1.5px 1.5px 0 rgba(0,0,0,0.2),0 2px 1.5px 0 rgba(0,0,0,0.1);
-webkit-box-shadow: 0 0 0 1px rgba(0,0,0,0.095) ,0 1.5px 1.5px 0 rgba(0,0,0,0.2),0 2px 1.5px 0 rgba(0,0,0,0.1);
background: #ffffff;
}

на

#category_view_type.grid_view #product_list .product_image_wrapper {
position: relative;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
box-shadow: 0 0 0 1px rgba(0,0,0,0.095) ,0 1.5px 1.5px 0 rgba(0,0,0,0.2),0 2px 1.5px 0 rgba(0,0,0,0.1);
-moz-box-shadow: 0 0 0 1px rgba(0,0,0,0.095) ,0 1.5px 1.5px 0 rgba(0,0,0,0.2),0 2px 1.5px 0 rgba(0,0,0,0.1);
-webkit-box-shadow: 0 0 0 1px rgba(0,0,0,0.095) ,0 1.5px 1.5px 0 rgba(0,0,0,0.2),0 2px 1.5px 0 rgba(0,0,0,0.1);
background: #ffffff;
}

затем замените

#product_list a.product_img_link img {
display: block;
vertical-align: bottom;
}

на

#product_list a.product_img_link img {
display: block;
vertical-align: bottom;
width: 310px;
}

Наверх

#8 Osashop

Пользователь

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

Отправлено 20 Октябрь 2014 - 19:52

Alekseys (20 Октябрь 2014 - 19:31) писал:

Здравствуйте. В style.css замените

#category_view_type.grid_view #product_list .product_image_wrapper {
position: relative;
padding: 8px;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
box-shadow: 0 0 0 1px rgba(0,0,0,0.095) ,0 1.5px 1.5px 0 rgba(0,0,0,0.2),0 2px 1.5px 0 rgba(0,0,0,0.1);
-moz-box-shadow: 0 0 0 1px rgba(0,0,0,0.095) ,0 1.5px 1.5px 0 rgba(0,0,0,0.2),0 2px 1.5px 0 rgba(0,0,0,0.1);
-webkit-box-shadow: 0 0 0 1px rgba(0,0,0,0.095) ,0 1.5px 1.5px 0 rgba(0,0,0,0.2),0 2px 1.5px 0 rgba(0,0,0,0.1);
background: #ffffff;
}

на

#category_view_type.grid_view #product_list .product_image_wrapper {
position: relative;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
box-shadow: 0 0 0 1px rgba(0,0,0,0.095) ,0 1.5px 1.5px 0 rgba(0,0,0,0.2),0 2px 1.5px 0 rgba(0,0,0,0.1);
-moz-box-shadow: 0 0 0 1px rgba(0,0,0,0.095) ,0 1.5px 1.5px 0 rgba(0,0,0,0.2),0 2px 1.5px 0 rgba(0,0,0,0.1);
-webkit-box-shadow: 0 0 0 1px rgba(0,0,0,0.095) ,0 1.5px 1.5px 0 rgba(0,0,0,0.2),0 2px 1.5px 0 rgba(0,0,0,0.1);
background: #ffffff;
}

затем замените

#product_list a.product_img_link img {
display: block;
vertical-align: bottom;
}

на

#product_list a.product_img_link img {
display: block;
vertical-align: bottom;
width: 310px;
}

Хорошо,но хотелось бы ещё крупнее(

Наверх

#9 Alekseys

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

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

Отправлено 20 Октябрь 2014 - 20:03

Osashop (20 Октябрь 2014 - 19:52) писал:

Хорошо,но хотелось бы ещё крупнее(

В style.css в блоке

#category_view_type.grid_view #product_list li {
display: inline-block;
display: -moz-inline-stack;
position: relative;
width: 310px;
min-height: 250px;
margin: 0 15px;
padding: 0;
border: 0;
vertical-align: top;
text-align: center;
z-index: 100;
}

отредактируйте параметр width: 310px; .