Без примеров Вашего кода сложно что-то конкретное советовать =)
лично мне существенно помогло разобраться в вёрстке понимание специфики работы:
1) box-sizing:border-box - свойство, без знания которого, у меня постоянно появлялись полосы прокрутки там, где я их не ожидал;
2) display:flex и механизм flexbox - существенно упрощанет верстку списков (как минимум) и вообще любо контента, состоящего из элементов, которые надо выводить на экранах различных размеров.
3)

@media (max-width: 300px) {...} @media (max-width: 600px) {...} ...

- если уж совсем всё плохо, создавайте блоки дизайна нескольких размеров, в зависимости от ширины экрана пользователя, а весь контент выравнивайте по центру.

navigator.userAgent - строка, зачем Вам Jquery?

Может, у меня довольно геморная реализация, сам бы хотел рассмотреть другие варианты. Сложность в динамическом выводе количества товаров возле фильтров и включении/отключении соседних значений фильтров в случае, если при выбранной комбинации они становятся недоступными. У Вас есть IDы атрибутов и IDы их значений, а также поле товара, содержащее пары (IDы-атрибута)_(IDзначения). Загоняете это поле в индекс sphinx и после очередного выбора пользователем фильтра производите поиск по этому полю товаров с комбинациями, которые он выбрал, плюс (!!) пара (IDы-атрибута)_(IDзначения) для каждого значения невыбранного фильтра. Количество найденных товаров и будет соответствовать индексу, проставляемому возле невыбранного фильтра.