K2 Items not responsive, Unresponsive k2 layout

Aloha All,

I love the responsive functionality of these templates.

problem, my k2 items are not shifting to single column layout as it does in the bike store demo site.
I have a 3 column layout for my k2 category, when i resize the browser to test the responsive flow, im left with unresponsive results. the columns are actually responding by shrinking in width, but they do not shift from 3 column to 1 column the way the do in the demo, from 2 to one.

I tried changing the column layout to 2 column with no results. Also i have a wide range of overides in the css, to fix some margin and padding issues in the k2 item layouts. I deleted all the overrides but this didn't have any effect.

I plowed through firebug trying to find what's driving this action in the demo site, but am left bewildered.

Here's the url to the site in question, and actually i discovered that this same problem is occuring in a site built with storebox.

http://lalithvummiti.com/index.php/portfolio/sound-design

i'll post the storebox site for reference as well. since i'll have to fix this one too.

http://v3.maunakeaorchids.com/jupgrade/index.php/orchids/wilsonara

Mahalo,

Could You post a link to bike store demo subpage that works the way You would like?

http://demo.gavick.com/joomla25/bikestore/index.php/2011-08-04-23-47-02/latest-items-two-columns

Ok, k2 doesnt have modile css classes for small screens.
Edit file:
/templates/gk_bikestore/css/mobile.css
and add at its end:

Code: Select all

#k2Container div.subCategoryContainer,
#itemListPrimary .itemListPrimary,
#itemListSecondary . itemContainer {
    float: none;
    width: 100% ;
}


You could also add the same code to end of tablet.css file so for browser with width between 540px and 900px there also gonna be only 1 column.

Hey,

I put that css in the bottom of both mobile.css and tablet.css, this did not fix it. Also added !important rules to the css also no change.

why would the gavick demo template have the k2 items and categories switch to 100% in the mobile, as well as on the browser when reducing the window size; but it not work in my site? I'm a bit confused here.

Took a better look at the gavick demo sites, pulled this and it works.

Code: Select all

#k2Container .itemContainer{width:100%!important;}
#k2Container .subCategoryContainer{width:100%!important;}
#k2Container .subCategory{height:auto!important;}