Categories placement on the home

[3malG]

col-lg-1 seams dont work for me, how large is large?

[a_5mith]

@3malG said:

col-lg-1 seams dont work for me, how large is large?

Large is full width. So, 1024? I think, 1 is also very small. If you want it full width, you'd use 12.

This is 12.

This is 6.

[3malG]

No, on very big screens I wanted to have a lot of columns, so you see a lot of topics at once, so -1 is ok, my definition is as follows: col-lg-1 col-md-3 col-sm-6 col-xs-12 but i have maximum 4 columns, not more, on 4000 pixel window.

[a_5mith]

@3malG

I see, so you can't get more than 4 in a row? Erm, well, lg-1 is 8.3333% width. So you should be able to fit 12 on a row...

col-lg-1 gives you

[3malG]

This is exactly what I want, but with my definition col-lg-1 col-md-3 col-sm-6 col-xs-12 I get not more then 4 columns:

[a_5mith]

@3malG said:

This is exactly what I want, but with my definition col-lg-1 col-md-3 col-sm-6 col-xs-12 I get not more then 4 columns:

That seems like 3. Can you try setting md-3 to md-1 and saving.

[3malG]

Yes, on big windows it looks like I wanted:

But on small windows it looks now ugly:

That is why I wanted to define col-lg-1 which do not work

[a_5mith]

@3malG said:

Yes, on big windows it looks like I wanted:

But on small windows it looks now ugly:

That is why I wanted to define col-lg-1 which do not work

In that case then, I would recommend adding a new class called col-xl before col-lg, then in your css doing something like

@media all and (min-width: 2048px) {
 .col-xl { width:8.33333% }
}

I haven't tested the code above, so you may have to add a few other pieces of CSS to that, you may have large gaps between them. I'm not 100%.

Also, your screen is bloody enormous. I'm assuming it's one of those new fangled 4K things?

[3malG]

Don't work for some reson, I have put this code in and changed col-lg-1 to col-xl, but no change. Why do the col-lg-1 not work?

( Yes, it is a bigger screen )

[frissdiegurke]

They don't work because the lavender theme seems to have some overwrites to fix 100% not fitting in some browsers:
https://github.com/NodeBB/nodebb-theme-lavender/blob/master/less/style.less#L80-L90

Because of the .home ... it's more specific and overwrites the default bootstrap classes.
To make your own ones working you have to use sth. like this for now:

@media all and (min-width: 2048px) {
  .home .col-xl { width:8.33333% }
}

ping @psychobunny maybe he'll fix that for standard bootstrap classes (would need to include all col-md and col-lg classes definitions into theme thought).

PS: you can see/change the bootstrap settings in lavender here, so it's lg: 1200px+, md: 992px+, sm: 768px+, xs: 480px+
But beware that this affects all columns on each page not only on home... If you intend to only change home you should rather overwrite them with .home .col-... as in above code-block