K2 Subcategory View 2 Columns

Hello, I have a subcategory view, I would like to have two columns instead of just one on the left.

I tried this code but it doesn't work:

Code: Select all


/* for two column children sub categories    */

#k2Container .itemListSubCategories div.subCategoryContainer {float: left;}
#k2Container .itemListSubCategories div.subCategoryContainerLast {float: right;}

.subCategoryContainer {
clear: none;
}



Link: http://www.mauzaza.com/skin-health

Regards.

Hi

Try with:

Code: Select all

#k2Container .itemListSubCategories div.subCategoryContainer {
    clear: none !important;
    float: left !important;
    width: 50% !important;
}

.itemListSubCategories .clr {
    clear: none;
}


Thank you Teitbite, it works!

I've added the following code to get rid of the H2 generated by K2.

Code: Select all

/* Remove Childre Categories H2 */
.itemListSubCategories h2 { display: none; }



Hi Teitbite, I am having one more issue with this section:

The "View Items..." button of this section: http://www.mauzaza.com/skin-health

It doesn't stay under the subCategoryImage at all resolution (especially above 1190px width...).

I would like it to stay under and follow the responsive action of a block that contains both the subCategoryImage and this View Items button in Style2.css.

-One of the problem is that there is also a View Cart button that has the same class under .k2store_cart_module_790 .k2store-minicart-button in the gkSidebar position (on top).

Thank you,
Regards

Hi

This is not because of responsive functionality. There is simply no space for image and button to be in one line in some screen widths. You may try this code, but I'm not sure how it will work so will have to see it after You copy it to override.css

Code: Select all

@media only screen and (max-width:1199px) {
.subCategoryContainer .subCategory a.subCategoryImage {
margin: 0;
width: 50%
}

.subCategoryContainer .subCategory a.button {
margin-right: 1%;
width: 49%
}
}


Thank you Teitbite!

Regards