XF 2.2 Firefox not showing sub forum in columns

[Dixie McCall]

Howdy,
I have my sub forums in four columns but Firefox is showing them in one long column. Is there a work around for this?

see attached.

I'm using this code.
.node-subNodeFlatList {
display: block;
width: 700px;
columns: 150px 4;

}
.node-subNodeFlatList li {
width: 100%;
float: left;
font-size: 12px;
}

Thank you kindly,

Finn

 

[djbaxter]

Have you tried @Brogan's solution posted here?

XF 2.2 - Want to display subforums in columns

I want to display subforums below main node but the default just displays them in a string. I would like to display them in 2-4 columns on the main forum index page. These tips show some examples of how to do it for Xenforo 1.x, although they are not exactly what I want...

xenforo.com

 

[Dixie McCall]

Hello djbaxter,
Yes I think I got part of my code from that thread but for some reason FF isn't showing them in column mode but Chrome is.

What the heck am I doing wrong?

 

[AndyB]

Verify you're able to display correctly using the XenForo default style.

 

[djbaxter]

I use Firefox as my default browser.

Your code also includes width settings for both the block and the columns. Those may need to be adjusted down a bit, especially if the subforums have long titles (although they do wrap but not necessarily in the way you want - you may also need to edit the node titles — that wont mess anything up for search engines as long as you haven't removed. the .xxxxxx node number at the end).

I think on the forum I used that CSS I was not able to display 4 columns with a sidebar and had to settle for just two. It still looks neater that way though.

 

[Dixie McCall]

Verify you're able to display correctly using the XenForo default style.

Hi Andy,
The four column works in default on Chrome but not on FF.

 

[Dixie McCall]

Hi Dj,
I've adjusted down all the forum titles to "fit" the code. It's not showing in default either on FF but is shows nicely in Chrome.

 

[djbaxter]

Does it work with 2 or 3 columns?

 

[Dixie McCall]

No not in FF

 

[djbaxter]

Clear your browser cache and do a hard refresh between changes?

Also you're seeing this on desktop or laptop, I assume? Just to be sure...

 

[Dixie McCall]

cleared and on laptop.

 

[djbaxter]

I'm using this code.
.node-subNodeFlatList {
display: block;
width: 700px;
columns: 150px 4;

}
.node-subNodeFlatList li {
width: 100%;
float: left;
font-size: 12px;
}

Something @Russ helped me with recently. Try adding !important to your CSS:

.node-subNodeFlatList {
display: block !important;
width: 700px !important;
columns: 150px 4 !important;
}

.node-subNodeFlatList li {
width: 100% !important;
float: left !important;
font-size: 12px !important;
}

If it still doesn't work, I don't know what to say.

 

[djbaxter]

@Russ just told me my suggestion will break on mobile but he will respond when he's at his desktop.