Change number of columns

[elbirth]

I'm really enjoying this startpage- I was wondering if you could point me in the right direction for how to change the number of columns will appear on each line? Right now I have 5 visible sections, which leads to having 4 sections on the first row, and then a 2nd row with just the 5th section. I made the font slightly smaller and would like to be able to make the columns closer together so that I can squeeze the 5th section back up to the first row.

[EduardoZepeda]

Hi elbirth, the thing with bootstrap is that it uses a 12 column grid by default, so the sum of all the columns must be equal to 12. However you can add a little piece of css code to change that to 15 columns.

First enter js/views/views.js, go to line 105 and locate the following piece of code

        if (counter == 0 || counter % 4 == 0) {
          //Add 4 columns to ech row (4x3 = 12(desired number))
          self.$el.append('<div class="row"></div>');
        }
        //If it doesn't, add the respective section at the end and then append the model to it
        $('.row:last-child').append(`<div class="col-sm-3"><div class="box" id="${site.get('section')}"><h3>${site.get('section')}</h3></div></div>`);
        counter += 1;
        $('#' + site.get('section')).append(new vistaURL({ //Render the respective model and append it to its section
          model: site
        }).render().$el);

Replace counter % 4 for counter % 5 and a few lines down replace <div class="col-sm-3"> for <div class="col-sm-5ths">

Now let's add those styles. Just paste the following piece of code at the end of the css/styling.css file (or your own css file)

.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.col-xs-5ths {
    width: 20%;
    float: left;
}

@media (min-width: 768px) {
    .col-sm-5ths {
        width: 20%;
        float: left;
    }
}

@media (min-width: 992px) {
    .col-md-5ths {
        width: 20%;
        float: left;
    }
}

@media (min-width: 1200px) {
    .col-lg-5ths {
        width: 20%;
        float: left;
    }
}

Now you should have a 5 columns layout.

Please let me know if it works for you, for me it does.

Source: enter here

[elbirth]

This works perfectly, thanks Eduardo! I had found the start of that code and was changing 4 to 5 (without any success), but am unfamiliar with Bootstrap, so didn't know that I needed to change the other part to tie it all together (and then add the additional CSS).

Following your instructions gets me to exactly where I want to be, so thanks for the quick reply!

4d617474 - a 10-blocks-per-page version sounds interesting, I'll keep an eye out for that!

[4d617474]

Hey again, l'm sorry, l saw this reply on my email account because l follow this one and thought that it was from my startpage, l'm not actually working on a different version Eduardo's one, sorry for misunderstanding :/