Hi guys,

I was wondering is there an easy way to automate the Category item layout to display different count of leading and primary items based on the screen size?
What I have in my mind is something like this:

@media (min-width: 1200px) - leading count 3 items with 33.33% width

@media (min-width: 992px) - primary count 2 items with 50% width

and

@media (max-width: 768) - 1 item with 100% width

I would be extremely grateful if you could give me an idea of how would that be accomplished, something tells me it isnt as complicated.

Even better I can point you to an example ->
demo.nuevvo.com/sites/j3x/takai/index.php?option=com_k2&view=itemlist&layout=category&task=&id=&Itemid=156

Basically what you do is control the minimum width of the .itemContainer class.

Hey Krikor, thanks for the fast response! Anyway I can see how that would work in some cases but not in mine exactly.
As well that has been integrated in the new 2.7.x update as far as I can see? I did not have it on one of my websites and I see its there now after the k2 update I did yesterday.
The option you are showing me would work on lets say two different screen sizes, what I was thinking was to control how many items are displayed as per screen size. Meaning I could for example display 3 items in a row each 33% if the screen size is more than 1200px (desktop screen) as that would make their image size aprox 400px wide, then if the space is shrunk to less than 800 to just display 2 x 50% wide which will still give the same image size blocks as what would be in 1200px and third case is phones and smaller devices to be 1 item 100% wide for screen size less than 450-500px.

The current situation for example you can set 3 items or even more on a desktop screen size and they will look good but shrinking them to smaller screensize lets say any size between 500 and 1200px essentially makes them look smaller and inconsistent.