Reduce the gutter (default 30px) on smaller devices in Bootstrap3?

Question

In bootstrap 3 the gutter is defined as 30px (15px on each side of a column). The issue I\'m running is that, for example if I shrink my screen down to be tiny, the gutters

Answer 1

I tried to rewrite Bootstrap mixin in order to have half of the normal grid-gutter for the XS width. Seems work fine.

.make-xs-column(@columns; @gutter: @grid-gutter-width) {   
    @media(max-width: @screen-xs-min) {
        padding-left:  (@gutter / 4);
        padding-right: (@gutter / 4);
    };
}
.make-row(@gutter: @grid-gutter-width) {
    @media(max-width: @screen-xs-min) {
        margin-left:  (@gutter / -4);
        margin-right: (@gutter / -4);
    }
}

.container-fixed() {
    @media(max-width: @screen-xs-min) {
        padding-left:  (@grid-gutter-width / 4);
        padding-right: (@grid-gutter-width / 4);
    }
}