Joomla Templates Club 406,261 posts

[t4mobile Friend t4mobileJoin date: September 2015Posts: 67Downloads:8Uploads:0 Thanks: 17]

#697253

I want to show more than 4 categories actively (columns) on Browse Listing

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#750977

Hi @t4mobile,

Could you please provide your site url so I can assist you better since in demo site, currently there are 4 blocks here.

[t4mobile Friend t4mobileJoin date: September 2015Posts: 67Downloads:8Uploads:0 Thanks: 17]

#704134

I want to have 5 or more blocks across.
http://www.zipsalons.com/vdirectory

[t4mobile Friend t4mobileJoin date: September 2015Posts: 67Downloads:8Uploads:0 Thanks: 17]

#751204

I want to have 5 or more blocks across.
http://www.zipsalons.com/vdirectory

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#704561

Hi @t4mobile,

Please open file templatesja_directorycsscustom.css file then add this code :

In case you want to implement 5 columns

@media (min-width: 992px) {
section.t3-section .k2CategoriesListBlock .level0 > li {
width: 20%;
}
}
.t3-section .k2CategoriesListBlock .level0 > li:nth-child(4n + 1) {
clear: none;
}
.t3-section .k2CategoriesListBlock .level0 > li:nth-child(5n + 1) {
clear: both;
}

In case you want to implement 6 columns

@media (min-width: 992px) {
section.t3-section .k2CategoriesListBlock .level0 > li {
width: 16.65%;
}
}
.t3-section .k2CategoriesListBlock .level0 > li:nth-child(4n + 1) {
clear: none;
}
.t3-section .k2CategoriesListBlock .level0 > li:nth-child(6n + 1) {
clear: both;
}

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#751333

Hi @t4mobile,

Please open file templatesja_directorycsscustom.css file then add this code :

In case you want to implement 5 columns

@media (min-width: 992px) {
section.t3-section .k2CategoriesListBlock .level0 > li {
width: 20%;
}
}
.t3-section .k2CategoriesListBlock .level0 > li:nth-child(4n + 1) {
clear: none;
}
.t3-section .k2CategoriesListBlock .level0 > li:nth-child(5n + 1) {
clear: both;
}

In case you want to implement 6 columns

@media (min-width: 992px) {
section.t3-section .k2CategoriesListBlock .level0 > li {
width: 16.65%;
}
}
.t3-section .k2CategoriesListBlock .level0 > li:nth-child(4n + 1) {
clear: none;
}
.t3-section .k2CategoriesListBlock .level0 > li:nth-child(6n + 1) {
clear: both;
}

[Author]

Posts