Categories placement on the home


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


  • @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.
    Home_35hz_Drum_n_Bass_Community_-_2014-09-05_20.55.08.png

    This is 6.
    Home_35hz_Drum_n_Bass_Community_-_2014-09-05_20.55.28.png


  • 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.


  • @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

    Home_35hz_Drum_n_Bass_Community_-_2014-09-05_21.29.52.png


  • 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:
    bug.jpg


  • @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:
    bug.jpg

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


  • Yes, on big windows it looks like I wanted:
    bug1.jpg

    But on small windows it looks now ugly:
    bug2.jpg

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


  • @3malG said:

    Yes, on big windows it looks like I wanted:
    bug1.jpg

    But on small windows it looks now ugly:
    bug2.jpg

    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?


  • 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 🙂 )

  • Plugin & Theme Dev

    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 😉

Suggested Topics

| |