Hi,

I'd like to have a K2 category display with 3 columns on desktop/laptop screens. I want the number of columns to change to 2 on screens below 768 pixels (portrait oriëntated tablet) and to 1 column on phone.

I could not find an option to do this so I started tweaking: I removed the width setting (33.3%) of the subCategoryContainer form the html output of K2 (using NoNuber's ReReplacer, so no harm done to the code) and provided a custom css with media queries. However I find myself going further and further up this road as I keep finding other things that need adjusting.

So I thought I'd better ask: is there a way in K2 to accomplish the type of responsive behavior as described above?


Kind regards,
Frits

This is all CSS code.
You can set the max-width of a column depending on the current viewport.

You can also set min-width: 0 in the last case

Hi Krikor,

Thanks for your reply. I was going along somewhat the same way as you described, however I found that I ran into some new challenges.

First: if I set the number of columns to 3, then after each third category block a div is inserted that forces a new line ( div class="clr" ). In my situation the two-column display won't work because of this. So I eliminated this div.

Next issue may well be caused by eliminating this clearing class. When showing items below the category title and image now, the total height of the surrounding container will vary depending on the height of the items, so there is no more equal vertical alignment for the categories that are on the same line.

This is why I deceided to ask for help. I hope it made clear what the issues are.


Kind regards, Frits

You have to override the category.php file and remove that clearing divs.
I usually use float: none; display:inline-block; with vertical-align: top; and margin: 0 -2px;in larger grids in order to avoid the issues you are describing.

float: left should be used when all your items are of the same height. If you your image size is consistent you can also specify a min-height for these items and use float: left instead of the former snippet I gave you,