Make the page responsive

[tanyeah]

The page needs to be responsive (as confirmed by @deniak).

I don't see a need for an elaborate design mock-up, here. Maybe just:

• Transition the main content from a two-column to a single column layout
• Make the sidebar horizontal, move to the top of the page
• Filters below the horizontal sidebar, either made sticky, or with a 'scroll to top' arrow (pointing upwards) in the bottom right of the screen that makes the jump to the filter section easy for users

@tripu, what do you think?

[tripu]

@tanyeah, in order to distribute items better according to available space, I think it'd be better to do one of these two things:

• We make ul#container be display: flex, and set limits to the min and max sizes of its li children
• Or, in ul#container we set property column-count to a value that we determine dynamically, using media queries (eg, from 1 for small screens to 4 for very wide ones); and make its li children be display: block.

Either case, the number of columns would vary automatically depending on the width available. I think the list of specs would look better that way.

WDYT?

/cc @deniak

[deniak]

👍 to have different number of columns depending on the screens.
Flexbox is widely supported so I'd favor that method.