How do you resize the column width of a list in Trello?


In Trello's current implementation, this is not configurable: lists are programmatically sized to be between 300–210 pixels wide depending on the available space.

However, if you don't mind a bit of a hack, you can take matters into your own hands, with some JavaScript:

(function(w) {
    $('.list-area').width($('.list').length * (w+12));  // 12px inter-list spacing
    $('body').addClass('layout-horiz-scroll');  // force-enable horizontal scrolling

(Substitute the 500 with your own desired pixel width.)

You can execute this at your browser's console, or save it as the following bookmarklet, to click whenever you want some more width:

javascript:(function(w) { $('.js-list').width(w); $('.list').width(w); $('.list-area').width($('.list').length * (w+12)); $('body').addClass('layout-horiz-scroll'); })(500)

Edit: Another option for the bookmarklet to prompt you for the actual desired size is:

javascript:(function(w) { $('.js-list').width(w); $('.list').width(w); $('.list-area').width($('.list').length * (w+12)); $('body').addClass('layout-horiz-scroll'); })(prompt("List width?", 500))

It will not validate the answer, so if you enter something that is not a number it won't work.

  • This is great! Do you think you could make the number be entered through a javascript prompt so that the user gets to decide at the moment the bookmarklet is clicked?
    – Alpha
    Oct 17 '12 at 1:11
  • Sure: Replace the 500 with something like: prompt('List width?', '500').
    – Pi Delport
    Oct 19 '12 at 9:49
  • Thanks, I hope you don't mind but I added that to your answer as well, to make it even more complete.
    – Alpha
    Oct 19 '12 at 13:10
  • 1
    Minor update to the bookmarklet code: cards themselves were not resized (their width was capped at 300px with max-width css property on .list-card class). javascript:(function(w) { $('.list-card').css('max-width', 'none');$('.list').width(w); $('.list-area').width($('.list').length * (w+12)); $('body').addClass('layout-horiz-scroll'); })(prompt("List width?", 500)) Oct 24 '13 at 2:28
  • 3
    A simpler bookmarklet which works on December 2nd, 2016: javascript javascript:(function() { $('.list-card').width('490px');$('.list-wrapper').width('500px');$('.list-card').css('max-width', '470px'); })();
    – jmgarnier
    Dec 2 '16 at 20:31

To make the card-details wider, you can use this bookmark-script:

javascript:(function(w) { 
$('.window').css('width', w+'px');
$('.window-main-col').css('width', (w-184)+'px');
})(prompt("New Width? (default 730)", 1030))

For me, adding 300px looks a lot better on Full-HD-Displays


This is an slightly updated answer as Trello now set the board list layout to display: flex instead of display: block, so the width twist won't work anymore.

Also, noted that Trello tents to inject the style to every new card created. therefore it could be a good idea to create a observer and monitoring any DOM changes of the page, enforce the style change taking place at all time.

var newWidth = 400;
var cardNewHeight = 40;
function enforceNewWidth() {
  (function(w) {
      $('.list').css({flex: '0 0 ' + w + 'px'});

      // updated 2015-04-01
      $('.list').css('max-width', w + 'px');

      $('.list-card').css('max-width', w + 'px');
      $('.list-card').css('min-height', cardNewHeight + 'px');
      // $('.list-area').width($('.list').length * (w+12));  // 12px inter-list spacing    
      $('textarea.list-card-composer-textarea').css({width: (w - 40) + 'px'});


var observer = new MutationObserver(function(mutations) {

observer.observe(document, {childList: true, subtree: true});

I was trying to make the lists narrower because my current board has lots of them and for almost all of them the tile was about 75% of the width of the card (in fact, I think I could still get a majority if I only counted the ones with titles less than 50% of the width of the card).

I tried the JS script suggested here(not the latest one though) and while it did indeed make the lists narrower it didn't eliminate the newly formed gap between them. So, I came up with this primitive but 'does the trick' way of doing it:

  1. press Ctrl + '-' until you get the desired list width (that's probably when all the lists fit the screen)
  2. by now the text is probably pretty small so open the element inspector and edit the css for .list-card-title and increase the font size ( I added 'font-size: larger;' and it seemed to be enough).
  3. (optional) if you see the 'g's and such missing their lower part you might want to add a few pixels of bottom padding (I added 10).

The opposite (Zoom in and shrink the text) might work if you want to increase list widths.

As I said before, this is probably not the 'proper' way of handling things but it got me the result I wanted and it's quick.


This is not an available option and so the widths of columns in Trello are fixed.


There is now an add-on for Chrome called "Slim Lists for Trello" available on the Web Store:


  • 1
    How does this solve the problem? Can you at least link to the tool you're recommending?
    – ale
    May 12 '15 at 17:18
  • This extension solved the problem for me. Down-voters please revisit, the OP has now added a link and this is useful answer.
    – yoyo
    Apr 10 '18 at 21:17
  • This only reduces the width, and does not look configurable to me.
    – volvox
    Oct 5 '18 at 17:56
  1. Download the Pro4Trello Free Chrome extension

  2. Tick the "Apply custom CSS" and add this:

    .list {
      width: 375px;
    .list-wrapper {
      width: 375px;

Firefox now has an add on for this: Trello Super Powers.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.