/* Responsive 996px grid system ~ Grid CSS. Copyright 2013, Josh Cope 12 Columns ~ Margin left: 13px ~ Margin right: 13px Based on the 960.gs grid system - http://960.gs/ by Nathan Smith Licensed under GPL and MIT */ @base1200: 66px; @margin1200: 20px; @base970: 53px; @margin970: 16px; @base768: 38px; @margin768: 10px; /* ============================================================================= Base 1200px Grid ========================================================================== */ body { } /* Container */ .container { margin-left: auto; margin-right: auto; width: @base1200 * 14 + @margin1200 * 14; } /* Create a row with fullwidth */ .fullwidth { margin: 0; padding: 0; border: 0; width: auto; clear: both; overflow: auto; } /* Global */ .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12, .grid_13, .grid_14 { display: inline; float: left; margin-left: @margin1200/2; margin-right: @margin1200/2; } .push_1, .pull_1, .push_2, .pull_2, .push_3, .pull_3, .push_4, .pull_4, .push_5, .pull_5, .push_6, .pull_6, .push_7, .pull_7, .push_8, .pull_8, .push_9, .pull_9, .push_10, .pull_10, .push_11, .pull_11, .push_12, .pull_13, .push_14 { position: relative; } /* Children (Alpha ~ First, Omega ~ Last) */ .alpha {margin-left: 0;} .omega {margin-right: 0;} /* Base Grid */ /* Global | 960px */ .container .grid_1 {width: @base1200;} .container .grid_2 {width: @base1200*2 + @margin1200;} .container .grid_3 {width: @base1200*3 + @margin1200*2;} .container .grid_4 {width: @base1200*4 + @margin1200*3;} .container .grid_5 {width: @base1200*5 + @margin1200*4;} .container .grid_6 {width: @base1200*6 + @margin1200*5;} .container .grid_7 {width: @base1200*7 + @margin1200*6;} .container .grid_8 {width: @base1200*8 + @margin1200*7;} .container .grid_9 {width: @base1200*9 + @margin1200*8;} .container .grid_10 {width: @base1200*10+ @margin1200*9;} .container .grid_11 {width: @base1200*11+ @margin1200*10;} .container .grid_12 {width: @base1200*12+ @margin1200*11;} .container .grid_13 {width: @base1200*13+ @margin1200*12;} .container .grid_14 {width: @base1200*14+ @margin1200*13;} /* Prefix Extra Space */ .container .prefix_1 {padding-left: (@base1200+@margin1200);} .container .prefix_2 {padding-left: (@base1200+@margin1200)*2;} .container .prefix_3 {padding-left: (@base1200+@margin1200)*3;} .container .prefix_4 {padding-left: (@base1200+@margin1200)*4;} .container .prefix_5 {padding-left: (@base1200+@margin1200)*5;} .container .prefix_6 {padding-left: (@base1200+@margin1200)*6;} .container .prefix_7 {padding-left: (@base1200+@margin1200)*7;} .container .prefix_8 {padding-left: (@base1200+@margin1200)*8;} .container .prefix_9 {padding-left: (@base1200+@margin1200)*9;} .container .prefix_10 {padding-left: (@base1200+@margin1200)*10;} .container .prefix_11 {padding-left: (@base1200+@margin1200)*11;} .container .prefix_12 {padding-left: (@base1200+@margin1200)*12;} .container .prefix_13 {padding-left: (@base1200+@margin1200)*13;} /* Suffix Extra Space */ .container .suffix_1 {padding-right: (@base1200+@margin1200);} .container .suffix_2 {padding-right: (@base1200+@margin1200)*2;} .container .suffix_3 {padding-right: (@base1200+@margin1200)*3;} .container .suffix_4 {padding-right: (@base1200+@margin1200)*4;} .container .suffix_5 {padding-right: (@base1200+@margin1200)*5;} .container .suffix_6 {padding-right: (@base1200+@margin1200)*6;} .container .suffix_7 {padding-right: (@base1200+@margin1200)*7;} .container .suffix_8 {padding-right: (@base1200+@margin1200)*8;} .container .suffix_9 {padding-right: (@base1200+@margin1200)*9;} .container .suffix_10 {padding-right: (@base1200+@margin1200)*10;} .container .suffix_11 {padding-right: (@base1200+@margin1200)*11;} .container .suffix_12 {padding-right: (@base1200+@margin1200)*12;} .container .suffix_13 {padding-right: (@base1200+@margin1200)*13;} /* Push Space */ .container .push_1 {left: (@base1200 *1 )+@margin1200;} .container .push_2 {left: (@base1200 *2 )+@margin1200*2;} .container .push_3 {left: (@base1200 *3 )+@margin1200*3;} .container .push_4 {left: (@base1200 *4 )+@margin1200*4;} .container .push_5 {left: (@base1200 *5 )+@margin1200*5;} .container .push_6 {left: (@base1200 *6 )+@margin1200*6;} .container .push_7 {left: (@base1200 *7 )+@margin1200*7;} .container .push_8 {left: (@base1200 *8 )+@margin1200*8;} .container .push_9 {left: (@base1200 *9 )+@margin1200*9;} .container .push_10 {left: (@base1200 *10)+@margin1200*10;} .container .push_11 {left: (@base1200 *11)+@margin1200*11;} .container .push_12 {left: (@base1200 *12)+@margin1200*12;} .container .push_13 {left: (@base1200 *13)+@margin1200*13;} /* Pull Space */ .container .pull_1 {left: -(@base1200 *1 )+@margin1200;} .container .pull_2 {left: -(@base1200 *2 )+@margin1200;} .container .pull_3 {left: -(@base1200 *3 )+@margin1200;} .container .pull_4 {left: -(@base1200 *4 )+@margin1200;} .container .pull_5 {left: -(@base1200 *5 )+@margin1200;} .container .pull_6 {left: -(@base1200 *6 )+@margin1200;} .container .pull_7 {left: -(@base1200 *7 )+@margin1200;} .container .pull_8 {left: -(@base1200 *8 )+@margin1200;} .container .pull_9 {left: -(@base1200 *9 )+@margin1200;} .container .pull_10 {left: -(@base1200 *10)+@margin1200;} .container .pull_11 {left: -(@base1200 *11)+@margin1200;} .container .pull_12 {left: -(@base1200 *12)+@margin1200;} .container .pull_13 {left: -(@base1200 *13)+@margin1200;} .container .pull_14 {left: -(@base1200 *14)+@margin1200;} /* Images & Other Objects */ img, object, embed { max-width: 100%;} img { height: auto; } /* ============================================================================= 960px Grid ========================================================================== */ @media only screen and (min-width: 970px) and (max-width: 1195px) { body { } .container { margin-left: auto; margin-right: auto; width: @base970 * 14 + @margin970 * 14; } .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12, .grid_13, .grid_14 { display: inline; float: left; margin-left: @margin970/2; margin-right: @margin970/2; } /* Global | 960px */ .container .grid_1 {width: @base970;} .container .grid_2 {width: @base970*2 + @margin970;} .container .grid_3 {width: @base970*3 + @margin970*2;} .container .grid_4 {width: @base970*4 + @margin970*3;} .container .grid_5 {width: @base970*5 + @margin970*4;} .container .grid_6 {width: @base970*6 + @margin970*5;} .container .grid_7 {width: @base970*7 + @margin970*6;} .container .grid_8 {width: @base970*8 + @margin970*7;} .container .grid_9 {width: @base970*9 + @margin970*8;} .container .grid_10 {width: @base970*10+ @margin970*9;} .container .grid_11 {width: @base970*11+ @margin970*10;} .container .grid_12 {width: @base970*12+ @margin970*11;} .container .grid_13 {width: @base970*13+ @margin970*12;} .container .grid_14 {width: @base970*14+ @margin970*13;} /* Prefix Extra Space */ .container .prefix_1 {padding-left: (@base970+@margin970);} .container .prefix_2 {padding-left: (@base970+@margin970)*2;} .container .prefix_3 {padding-left: (@base970+@margin970)*3;} .container .prefix_4 {padding-left: (@base970+@margin970)*4;} .container .prefix_5 {padding-left: (@base970+@margin970)*5;} .container .prefix_6 {padding-left: (@base970+@margin970)*6;} .container .prefix_7 {padding-left: (@base970+@margin970)*7;} .container .prefix_8 {padding-left: (@base970+@margin970)*8;} .container .prefix_9 {padding-left: (@base970+@margin970)*9;} .container .prefix_10 {padding-left: (@base970+@margin970)*10;} .container .prefix_11 {padding-left: (@base970+@margin970)*11;} .container .prefix_12 {padding-left: (@base970+@margin970)*12;} .container .prefix_13 {padding-left: (@base970+@margin970)*13;} /* Suffix Extra Space */ .container .suffix_1 {padding-right: (@base970+@margin970);} .container .suffix_2 {padding-right: (@base970+@margin970)*2;} .container .suffix_3 {padding-right: (@base970+@margin970)*3;} .container .suffix_4 {padding-right: (@base970+@margin970)*4;} .container .suffix_5 {padding-right: (@base970+@margin970)*5;} .container .suffix_6 {padding-right: (@base970+@margin970)*6;} .container .suffix_7 {padding-right: (@base970+@margin970)*7;} .container .suffix_8 {padding-right: (@base970+@margin970)*8;} .container .suffix_9 {padding-right: (@base970+@margin970)*9;} .container .suffix_10 {padding-right: (@base970+@margin970)*10;} .container .suffix_11 {padding-right: (@base970+@margin970)*11;} .container .suffix_12 {padding-right: (@base970+@margin970)*12;} .container .suffix_13 {padding-right: (@base970+@margin970)*13;} /* Push Space */ .container .push_1 {left: (@base970 *1 )+@margin970;} .container .push_2 {left: (@base970 *2 )+@margin970*2;} .container .push_3 {left: (@base970 *3 )+@margin970*3;} .container .push_4 {left: (@base970 *4 )+@margin970*4;} .container .push_5 {left: (@base970 *5 )+@margin970*5;} .container .push_6 {left: (@base970 *6 )+@margin970*6;} .container .push_7 {left: (@base970 *7 )+@margin970*7;} .container .push_8 {left: (@base970 *8 )+@margin970*8;} .container .push_9 {left: (@base970 *9 )+@margin970*9;} .container .push_10 {left: (@base970 *10)+@margin970*10;} .container .push_11 {left: (@base970 *11)+@margin970*11;} .container .push_12 {left: (@base970 *12)+@margin970*12;} .container .push_13 {left: (@base970 *13)+@margin970*13;} /* Pull Space */ .container .pull_1 {left: -(@base970 *1 )+@margin970;} .container .pull_2 {left: -(@base970 *2 )+@margin970;} .container .pull_3 {left: -(@base970 *3 )+@margin970;} .container .pull_4 {left: -(@base970 *4 )+@margin970;} .container .pull_5 {left: -(@base970 *5 )+@margin970;} .container .pull_6 {left: -(@base970 *6 )+@margin970;} .container .pull_7 {left: -(@base970 *7 )+@margin970;} .container .pull_8 {left: -(@base970 *8 )+@margin970;} .container .pull_9 {left: -(@base970 *9 )+@margin970;} .container .pull_10 {left: -(@base970 *10)+@margin970;} .container .pull_11 {left: -(@base970 *11)+@margin970;} .container .pull_12 {left: -(@base970 *12)+@margin970;} .container .pull_13 {left: -(@base970 *13)+@margin970;} .container .pull_14 {left: -(@base970 *14)+@margin970;} /* Children (Alpha ~ First, Omega ~ Last) | 960 */ .alpha {margin-left: 0;} .omega {margin-right: 0;} } /* ============================================================================= Less than 768px ========================================================================== */ @media only screen and (min-width: 736px) and (max-width: 969px) { body { } /* Container | 768px */ .container { margin-left: auto; margin-right: auto; width: @base768 * 14 + @margin768 * 14; } /* Global | 768px */ .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12, .grid_13, .grid_14, .grid_15 { display: inline; float: left; margin-left: @margin768/2; margin-right: @margin768/2; } .container .grid_1 {width: @base768;} .container .grid_2 {width: @base768*2 + @margin768;} .container .grid_3 {width: @base768*3 + @margin768*2;} .container .grid_4 {width: @base768*4 + @margin768*3;} .container .grid_5 {width: @base768*5 + @margin768*4;} .container .grid_6 {width: @base768*6 + @margin768*5;} .container .grid_7 {width: @base768*7 + @margin768*6;} .container .grid_8 {width: @base768*8 + @margin768*7;} .container .grid_9 {width: @base768*9 + @margin768*8;} .container .grid_10 {width: @base768*10+ @margin768*9;} .container .grid_11 {width: @base768*11+ @margin768*10;} .container .grid_12 {width: @base768*12+ @margin768*11;} .container .grid_13 {width: @base768*13+ @margin768*12;} .container .grid_14 {width: @base768*14+ @margin768*13;} /* Prefix Extra Space */ .container .prefix_1 {padding-left: (@base768+@margin768);} .container .prefix_2 {padding-left: (@base768+@margin768)*2;} .container .prefix_3 {padding-left: (@base768+@margin768)*3;} .container .prefix_4 {padding-left: (@base768+@margin768)*4;} .container .prefix_5 {padding-left: (@base768+@margin768)*5;} .container .prefix_6 {padding-left: (@base768+@margin768)*6;} .container .prefix_7 {padding-left: (@base768+@margin768)*7;} .container .prefix_8 {padding-left: (@base768+@margin768)*8;} .container .prefix_9 {padding-left: (@base768+@margin768)*9;} .container .prefix_10 {padding-left: (@base768+@margin768)*10;} .container .prefix_11 {padding-left: (@base768+@margin768)*11;} .container .prefix_12 {padding-left: (@base768+@margin768)*12;} .container .prefix_13 {padding-left: (@base768+@margin768)*13;} /* Suffix Extra Space */ .container .suffix_1 {padding-right: (@base768+@margin768);} .container .suffix_2 {padding-right: (@base768+@margin768)*2;} .container .suffix_3 {padding-right: (@base768+@margin768)*3;} .container .suffix_4 {padding-right: (@base768+@margin768)*4;} .container .suffix_5 {padding-right: (@base768+@margin768)*5;} .container .suffix_6 {padding-right: (@base768+@margin768)*6;} .container .suffix_7 {padding-right: (@base768+@margin768)*7;} .container .suffix_8 {padding-right: (@base768+@margin768)*8;} .container .suffix_9 {padding-right: (@base768+@margin768)*9;} .container .suffix_10 {padding-right: (@base768+@margin768)*10;} .container .suffix_11 {padding-right: (@base768+@margin768)*11;} .container .suffix_12 {padding-right: (@base768+@margin768)*12;} .container .suffix_13 {padding-right: (@base768+@margin768)*13;} /* Push Space */ .container .push_1 {left: (@base768 *1 )+@margin768;} .container .push_2 {left: (@base768 *2 )+@margin768*2;} .container .push_3 {left: (@base768 *3 )+@margin768*3;} .container .push_4 {left: (@base768 *4 )+@margin768*4;} .container .push_5 {left: (@base768 *5 )+@margin768*5;} .container .push_6 {left: (@base768 *6 )+@margin768*6;} .container .push_7 {left: (@base768 *7 )+@margin768*7;} .container .push_8 {left: (@base768 *8 )+@margin768*8;} .container .push_9 {left: (@base768 *9 )+@margin768*9;} .container .push_10 {left: (@base768 *10)+@margin768*10;} .container .push_11 {left: (@base768 *11)+@margin768*11;} .container .push_12 {left: (@base768 *12)+@margin768*12;} .container .push_13 {left: (@base768 *13)+@margin768*13;} /* Pull Space */ .container .pull_1 {left: -(@base768 *1 )+@margin768;} .container .pull_2 {left: -(@base768 *2 )+@margin768;} .container .pull_3 {left: -(@base768 *3 )+@margin768;} .container .pull_4 {left: -(@base768 *4 )+@margin768;} .container .pull_5 {left: -(@base768 *5 )+@margin768;} .container .pull_6 {left: -(@base768 *6 )+@margin768;} .container .pull_7 {left: -(@base768 *7 )+@margin768;} .container .pull_8 {left: -(@base768 *8 )+@margin768;} .container .pull_9 {left: -(@base768 *9 )+@margin768;} .container .pull_10 {left: -(@base768 *10)+@margin768;} .container .pull_11 {left: -(@base768 *11)+@margin768;} .container .pull_12 {left: -(@base768 *12)+@margin768;} .container .pull_13 {left: -(@base768 *13)+@margin768;} .container .pull_14 {left: -(@base768 *14)+@margin768;} } @media only screen and (min-width: 600px) and (max-width: 736px) { body{ } /* Container */ .container { margin:0 auto; width:593px; overflow:hidden; } /* Global */ .container .grid_1, .container .grid_2, .container .grid_3, .container .grid_4, .container .grid_5, .container .grid_6, .container .grid_7, .container .grid_8, .container .grid_9, .container .grid_10, .container .grid_11, .container .grid_12, .container .grid_13, .container .grid_14 { width:416px; clear: both; float: none; margin-left: 0; margin-right: 0; display:inline-block; padding-left: 20px; padding-right: 20px; /* IE 6&7 */ zoom:1; *display:inline; } /* Nested children need no padding */ .grid_1 .grid_1, .grid_2 .grid_1, .grid_2 .grid_2, .grid_3 .grid_1, .grid_3 .grid_2, .grid_3 .grid_3, .grid_4 .grid_1, .grid_4 .grid_2, .grid_4 .grid_3, .grid_4 .grid_4, .grid_5 .grid_1, .grid_5 .grid_2, .grid_5 .grid_3, .grid_5 .grid_4, .grid_5 .grid_5, .grid_6 .grid_1, .grid_6 .grid_2, .grid_6 .grid_3, .grid_6 .grid_4, .grid_6 .grid_5, .grid_6 .grid_6, .grid_7 .grid_1, .grid_7 .grid_2, .grid_7 .grid_3, .grid_7 .grid_4, .grid_7 .grid_5, .grid_7 .grid_6, .grid_7 .grid_7, .grid_8 .grid_1, .grid_8 .grid_2, .grid_8 .grid_3, .grid_8 .grid_4, .grid_8 .grid_5, .grid_8 .grid_6, .grid_8 .grid_7, .grid_8 .grid_8, .grid_9 .grid_1, .grid_9 .grid_2, .grid_9 .grid_3, .grid_9 .grid_4, .grid_9 .grid_5, .grid_9 .grid_6, .grid_9 .grid_7, .grid_9 .grid_8, .grid_9 .grid_9, .grid_10 .grid_1, .grid_10 .grid_2, .grid_10 .grid_3, .grid_10 .grid_4, .grid_10 .grid_5, .grid_10 .grid_6, .grid_10 .grid_7, .grid_10 .grid_8, .grid_10 .grid_9, .grid_10 .grid_10, .grid_11 .grid_1, .grid_11 .grid_2, .grid_11 .grid_3, .grid_11 .grid_4, .grid_11 .grid_5, .grid_11 .grid_6, .grid_11 .grid_7, .grid_11 .grid_8, .grid_11 .grid_9, .grid_11 .grid_10, .grid_11 .grid_11, .grid_12 .grid_1, .grid_12 .grid_2, .grid_12 .grid_3, .grid_12 .grid_4, .grid_12 .grid_5, .grid_12 .grid_6, .grid_12 .grid_7, .grid_12 .grid_8, .grid_12 .grid_9, .grid_12 .grid_10, .grid_12 .grid_11, .grid_12 .grid_12, .grid_13 .grid_1, .grid_13 .grid_2, .grid_13 .grid_3, .grid_13 .grid_4, .grid_13 .grid_5, .grid_13 .grid_6, .grid_13 .grid_7, .grid_13 .grid_8, .grid_13 .grid_9, .grid_13 .grid_10, .grid_13 .grid_11, .grid_13 .grid_12, .grid_13 .grid_13, .grid_14 .grid_1, .grid_14 .grid_2, .grid_14 .grid_3, .grid_14 .grid_4, .grid_14 .grid_5, .grid_14 .grid_6, .grid_14 .grid_7, .grid_14 .grid_8, .grid_14 .grid_9, .grid_14 .grid_10, .grid_14 .grid_11, .grid_14 .grid_12, .grid_14 .grid_13, .grid_14 .grid_14 { padding-left: 0px; padding-right: 0px; } .container .push_1, .container .push_2, .container .push_3, .container .push_4, .container .push_5, .container .push_6, .container .push_7, .container .push_8, .container .push_9, .container .push_10, .container .push_11, .container .push_12 .container .push_13 { left: 0; } .container .pull_1, .container .pull_2, .container .pull_3, .container .pull_4, .container .pull_5, .container .pull_6, .container .pull_7, .container .pull_8, .container .pull_9, .container .pull_10, .container .pull_11,.container .pull_12, .container .pull_13 { left: 0; } } @media only screen and (max-width: 600px) { body{ } /* Container */ .container { margin:0 auto; width:456px; overflow:hidden; } /* Global */ .container .grid_1, .container .grid_2, .container .grid_3, .container .grid_4, .container .grid_5, .container .grid_6, .container .grid_7, .container .grid_8, .container .grid_9, .container .grid_10, .container .grid_11, .container .grid_12, .container .grid_13, .container .grid_14 { width:416px; clear: both; float: none; margin-left: 0; margin-right: 0; display:inline-block; padding-left: 20px; padding-right: 20px; /* IE 6&7 */ zoom:1; *display:inline; } /* Nested children need no padding */ .grid_1 .grid_1, .grid_2 .grid_1, .grid_2 .grid_2, .grid_3 .grid_1, .grid_3 .grid_2, .grid_3 .grid_3, .grid_4 .grid_1, .grid_4 .grid_2, .grid_4 .grid_3, .grid_4 .grid_4, .grid_5 .grid_1, .grid_5 .grid_2, .grid_5 .grid_3, .grid_5 .grid_4, .grid_5 .grid_5, .grid_6 .grid_1, .grid_6 .grid_2, .grid_6 .grid_3, .grid_6 .grid_4, .grid_6 .grid_5, .grid_6 .grid_6, .grid_7 .grid_1, .grid_7 .grid_2, .grid_7 .grid_3, .grid_7 .grid_4, .grid_7 .grid_5, .grid_7 .grid_6, .grid_7 .grid_7, .grid_8 .grid_1, .grid_8 .grid_2, .grid_8 .grid_3, .grid_8 .grid_4, .grid_8 .grid_5, .grid_8 .grid_6, .grid_8 .grid_7, .grid_8 .grid_8, .grid_9 .grid_1, .grid_9 .grid_2, .grid_9 .grid_3, .grid_9 .grid_4, .grid_9 .grid_5, .grid_9 .grid_6, .grid_9 .grid_7, .grid_9 .grid_8, .grid_9 .grid_9, .grid_10 .grid_1, .grid_10 .grid_2, .grid_10 .grid_3, .grid_10 .grid_4, .grid_10 .grid_5, .grid_10 .grid_6, .grid_10 .grid_7, .grid_10 .grid_8, .grid_10 .grid_9, .grid_10 .grid_10, .grid_11 .grid_1, .grid_11 .grid_2, .grid_11 .grid_3, .grid_11 .grid_4, .grid_11 .grid_5, .grid_11 .grid_6, .grid_11 .grid_7, .grid_11 .grid_8, .grid_11 .grid_9, .grid_11 .grid_10, .grid_11 .grid_11, .grid_12 .grid_1, .grid_12 .grid_2, .grid_12 .grid_3, .grid_12 .grid_4, .grid_12 .grid_5, .grid_12 .grid_6, .grid_12 .grid_7, .grid_12 .grid_8, .grid_12 .grid_9, .grid_12 .grid_10, .grid_12 .grid_11, .grid_12 .grid_12, .grid_13 .grid_1, .grid_13 .grid_2, .grid_13 .grid_3, .grid_13 .grid_4, .grid_13 .grid_5, .grid_13 .grid_6, .grid_13 .grid_7, .grid_13 .grid_8, .grid_13 .grid_9, .grid_13 .grid_10, .grid_13 .grid_11, .grid_13 .grid_12, .grid_13 .grid_13, .grid_14 .grid_1, .grid_14 .grid_2, .grid_14 .grid_3, .grid_14 .grid_4, .grid_14 .grid_5, .grid_14 .grid_6, .grid_14 .grid_7, .grid_14 .grid_8, .grid_14 .grid_9, .grid_14 .grid_10, .grid_14 .grid_11, .grid_14 .grid_12, .grid_14 .grid_13, .grid_14 .grid_14 { padding-left: 0px; padding-right: 0px; } .container .push_1, .container .push_2, .container .push_3, .container .push_4, .container .push_5, .container .push_6, .container .push_7, .container .push_8, .container .push_9, .container .push_10, .container .push_11, .container .push_12 .container .push_13 { left: 0; } .container .pull_1, .container .pull_2, .container .pull_3, .container .pull_4, .container .pull_5, .container .pull_6, .container .pull_7, .container .pull_8, .container .pull_9, .container .pull_10, .container .pull_11,.container .pull_12, .container .pull_13 { left: 0; } } /* ============================================================================= Less than 480px ========================================================================== */ @media only screen and (max-width: 479px) { /* Container */ .container { margin-left: auto; margin-right: auto; width:300px; } /* Global */ .container .grid_1, .container .grid_2, .container .grid_3, .container .grid_4, .container .grid_5, .container .grid_6, .container .grid_7, .container .grid_8, .container .grid_9, .container .grid_10, .container .grid_11, .container .grid_12, .container .grid_13, .container .grid_14 { width:260px; } }