[Решено] Адаптивный дизайн. Резиновый шаблон. От 4 до 10 товаров в строке - Дизайн и оформление

Добрый день! Задался вопросом: Как сделать резиновый адаптивный шаблон магазина. Что бы на больших мониторах товаров в строке было, например, 10 штук, а на маленьких, например, 4?! Есть такие сайты, знаете. Сужаешь экран, количество столбцов контента тоже меняется. Как это сделать для JoomShopping?

Заранее спасибо!

Используйте правило CSS "@media screen". Для шаблона на div все довольно просто. А вообще погуглите, найдете очень много информации. Например запрос "основы адаптивной верстки". Для responsive меню существует куча скриптов.

для этого должен быть респонсив не только ЖШ шаблон а в первую очередь шаблон сайта.

"то что у вас в ванной будет плавать резиновый утенок, совершено не повлияет на размеры ванной"

про общую верстку - это понятно. какую-нить платформу от студии можно взять, они халявные все. а для ДжумШопинга - это код ковырять? Нет какого-то шаблона у кого готового? Как на вашем сайте, уважаемый nevigen, есть шаблон страницы товара на div'ах.

вот тот шаблон на нашем сайте можете сделать адаптивным

Набросал небольшой примерчик работы responsive на сайте http://jshop.brooksite.ru/tovary.html с использованием только @media (жмакайте ctrl + или посмотрите на мобильных устройствах). Файл отвечающий за мобильность здесь http://jshop.brooksite.ru/templates/jblank/css/_responsive.css. Для наглядности он не оптимизирован, а так его можно сократить раза в два, соблюдая каскадность.

Набросал небольшой примерчик работы responsive на сайте http://jshop.brooksite.ru/tovary.html с использованием только @media (жмакайте ctrl + или посмотрите на мобильных устройствах). Файл отвечающий за мобильность здесь http://jshop.brooksite.ru/templates/jblank/css/_responsive.css. Для наглядности он не оптимизирован, а так его можно сократить раза в два, соблюдая каскадность.

о! я даже и не знал как это правильно назвать! responsive

Спасибо огромное!

Можете взять уже готовые.

Мы переверстали все шаблоны, здесь можете взять архив: http://profitshop-free.alex-kurteev.ru/

Будет выглядеть вот так: http://demo.alex-kurteev.ru/profitshop

Можете взять уже готовые.

некорректная верстка - в одном ряду 2 товара в другом 1 и так далее - запросы надо пересмотреть - ИМХО
но вообще-то это может сделать каждый сам для себя 

Ну там вообще могут быть вопросы...
просто формат вывода товров в строке 12/настройки
но! если их 1,2,3,4 норм, а если 5 ? или 7 ?
в общем там универсальность подхрамывает, а в целом норм.
немного подформатили дивный и дали просто бустраповские стили. молодцы спасибо.
опятьже.. для 2.5 будет иметь место если шаблон Ж адаптивный и установлен бустрап.
на Ж3.0 это в стоке есть.

Да, на 2.5 будет иметь смысл использовать только на адаптивном шаблоне.
Хотя можно и на обычном, в этом случае нужно подключать бутстраповские стили и js.

некорректная верстка - в одном ряду 2 товара в другом 1 и так далее - запросы надо пересмотреть - ИМХО
но вообще-то это может сделать каждый сам для себя 

Вы вероятно про демо-шаблон. Там на главной странице модули, они тоже исправлены, но без бутстрапа.
В списке товаров все корректно.

Ну там вообще могут быть вопросы...
просто формат вывода товров в строке 12/настройки
но! если их 1,2,3,4 норм, а если 5 ? или 7 ?
в общем там универсальность подхрамывает, а в целом норм.

Согласен, здесь не очень гибко получается. Но ведь мы привязаны к 12-колоночной бутстраповской сетке. А здесь никак. Да и в целом 6 товаров в строку более чем достаточно. Это если изображения маленькие. А если большие, то 2-4 товаров в строку обычно норм.