overflow of .colums over .container with fixed grid in small screen size

[dirkolbrich]

when set to fixed grid and on small screen size ~320px width, .columnwill overflow .container due to standard padding at .containerin _grid.scss:8

/* BASE GRID
 * ------------------------------------------------ */
.container {
	position: relative;
	width: $base-width;
	max-width: $grid-max-width;
	margin: 0 auto;
	padding: 0 relative(20px);
	box-sizing: border-box;
}

Proposed Fix

add max-widthto columns and delete small subtraction from widthof .colums in _mobileGrid(){}

@mixin _mobileGrid($width, $colCount, $isFluid) {
	$width: if($isFluid, $mobile-fluid-width, $width);
	.container {
		width: $width;
		.column,
		.columns {
			max-width: 100%; // add max-width
			margin: {
				left: if($isFluid, 2%, 0);
				right: if($isFluid, 2%, 0);
			};
		}
		@for $i from 1 through $colCount {
			@if ($i == 1) {
				.#{numToString($i)}.column { width: $width ; }
			}
		}
		@include _group($colCount, ".columns", "after") { width: $width; } // delete -4
		.one-third.column { width: $width; }  // delete -4
		.two-thirds.column { width: $width; }  // delete -4
		.full-width.columns {
			width: $width;
			margin-left: 0;
			margin-right: 0;
		}
		@include _mobileOffset($colCount);
	}
}

[atomicpages]

@dirkolbrich same as issue #29, it will help me identify issues/see you fixes much faster!

[atomicpages]

I agree with this fix. Works wonderfully!