Форум ReadyScript — Количество товаров в строке

Re: Количество товаров в строке

null@example.com (Sergey T.) — Thu, 19 May 2016 07:40:54 +0000

Разобрался. Все получилось. Спасибо за ответ.

Re: Количество товаров в строке

null@example.com (admin) — Thu, 13 Nov 2014 12:56:04 +0000

Все дело в CSS mediaquery. В классической теме, CSS разбиты по разрешениям экрана, на которых они подключаются:

1200.css - там в начале присутствует строка: @media screen and (min-width: 1280px) { ... }
960.css - @media screen and (min-width: 980px) and (max-width: 1280px) { ... }
720.css - @media screen and (min-width: 760px) and (max-width: 980px) { ... }

Вам необходимо обернуть ваш CSS соответствующим mediaquery конструкцией, чтобы сказать браузеру в каком случае этот CSS должен примениться.

Количество товаров в строке

null@example.com (Sergey T.) — Wed, 12 Nov 2014 07:36:32 +0000

4 товара при разрешении экрана больше 1200px по ширине:

3 товара при разрешении экрана меньше 1200px по ширине:

Прямо над "лидерами продаж" есть 4 блока под цифрами 1,2,3,4. Пытаюсь повторить такой же трюк, чтобы при разрешении больше 1200px было 4 блока, а если меньше 1200px было 3 блока. Сделал по аналогии с товарами, но что-то пошло не так, посмотрел в css, что меняется ширина в процентах, но как заставить при определенном разрешении применять ту или иную ширину так и понял. Вразумите, если не затруднит.

/* 3 фотографии в списке */

.productList > li{
    float:left;    
    width: 30.51317%;
    margin-right: 2.67392%;
    margin-bottom:18px;
    position:relative;
    outline: 1px solid #E8E8E8;
}

/* По 4 фотографии */

.productList > li {
    width:22.616946%;
    margin-right:2.206531%;
    outline: 1px solid #E8E8E8;
}