moodle: how to change the column size in bootstrap theme 'clean'?

css, moodle, themes, twitter-bootstrap

Solution

In Bootstrap, all `span*` elements revert to 100% width at 767px and below and below:

http://getbootstrap.com/2.3.2/scaffolding.html#responsive

What's happening is that you're setting the width of those specific span elements much later on down the CSS file and therefore overwriting the section of Bootstrap which sets the width to 100%.

To follow on from what you're doing, the answer is to ensure that you reset the width back to 100% at that break point:

.row-fluid .span9 { 
    width: 80.0%;
}
.row-fluid .span8 { 
    width: 80.0%;
}
.row-fluid .span3 { 
    width: 15.0%;
}
.row-fluid .span4 { 
    width: 15.0%;
}

/* set back to 100% for smaller screens */
@media (max-width: 767px) {
    .row-fluid .span9,
    .row-fluid .span8,
    .row-fluid .span3,
    .row-fluid .span4 { 
        width: 100%;
    }
}

Just as an additional comment for you: the whole point of Bootstrap is really to avoid hacking into the grid like this if at all possible. I suspect you'll find that forcing these widths here will also have knock-on effects elsewhere on your site.

Each 'span' equates to roughly 6% in width (not taking into account the margin between each), so a better answer to your requirement would be to edit your page markup. Where you're currently using `.span4` and `.span3` and subsequently forcing them to 15% these could be changed to `.span2` which would be roughly the same as your currently-forced 15% width. Then tweak the other span elements which fall within that row to take up the empty areas.

Problem

i'm trying to change the column size of the moodle theme 'clean' which is based on bootstrap. My Moodle uses a three column layout. The left and right columns are too wide and i'm want to make them more narrow, so that the column in the middle can be displayed wider. Moodle offers a textarea in the administration interface to add your own CSS code. I added the following code: ``` .row-fluid .span9 { width: 80.0%; } .row-fluid .span8 { width: 80.0%; } .row-fluid .span3 { width: 15.0%; } .row-fluid .span4 { width: 15.0%; } ``` It all looks good on desktop screen, but if i scale the browser window down to simulate a smartphone resolution it doesn't work. The left and right column move to the bottom like they should, but don't use the full width of the screen, but the 15% i defined in the settings. I guess i am using the wrong class and overwrite the size for desktop and mobile design. If anybody knows how to change the column size in the desktop version without overwriting it in the mobile version, that would be great !

Original source