Made grid more fluid, got rid of any pixel based padding and/or magins and made them percentage based
This commit is contained in:
		
							
								
								
									
										17
									
								
								css/skeleton.css
									
									
									
									
										vendored
									
									
								
							
							
						
						
									
										17
									
								
								css/skeleton.css
									
									
									
									
										vendored
									
									
								
							@@ -31,24 +31,23 @@
 | 
				
			|||||||
.container {
 | 
					.container {
 | 
				
			||||||
  position: relative;
 | 
					  position: relative;
 | 
				
			||||||
  width: 100%;
 | 
					  width: 100%;
 | 
				
			||||||
  max-width: 960px; 
 | 
					  max-width: 1280px;
 | 
				
			||||||
  margin: 0 auto;
 | 
					  margin: 0 auto;
 | 
				
			||||||
  padding: 0 15px; 
 | 
					  padding: 0 1%;
 | 
				
			||||||
  box-sizing: border-box; }
 | 
					  box-sizing: border-box; }
 | 
				
			||||||
.row {
 | 
					.row {
 | 
				
			||||||
  margin: 0 -15px 2rem; }
 | 
					  margin: 0 -1% 2rem; }
 | 
				
			||||||
.row .column,
 | 
					.row .column,
 | 
				
			||||||
.row .columns {
 | 
					.row .columns {
 | 
				
			||||||
  float: left;
 | 
					  float: left;
 | 
				
			||||||
  width: 100%;
 | 
					  width: 100%;
 | 
				
			||||||
  padding-right: 15px;
 | 
					  padding: 0 1%;
 | 
				
			||||||
  padding-left: 15px;
 | 
					 | 
				
			||||||
  box-sizing: border-box; }
 | 
					  box-sizing: border-box; }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
/* For devices larger than 550px */
 | 
					/* For devices larger than 600px */
 | 
				
			||||||
@media (min-width: 550px) {
 | 
					@media (min-width: 600px) {
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  .container { width: 90%; }
 | 
					  .container { width: 96%; }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  .row .one.column,
 | 
					  .row .one.column,
 | 
				
			||||||
  .row .one.columns          { width: 8.33333333334%; }
 | 
					  .row .one.columns          { width: 8.33333333334%; }
 | 
				
			||||||
@@ -62,7 +61,7 @@
 | 
				
			|||||||
  .row .nine.columns         { width: 75.0%;          }
 | 
					  .row .nine.columns         { width: 75.0%;          }
 | 
				
			||||||
  .row .ten.columns          { width: 83.3333333334%; }
 | 
					  .row .ten.columns          { width: 83.3333333334%; }
 | 
				
			||||||
  .row .eleven.columns       { width: 91.6666666667%; }
 | 
					  .row .eleven.columns       { width: 91.6666666667%; }
 | 
				
			||||||
  .row .twelve.columns       { width: 100%; margin-left: 0; }
 | 
					  .row .twelve.columns       { width: 100%;           }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  .row .one-third.column     { width: 33.3333333334%; }
 | 
					  .row .one-third.column     { width: 33.3333333334%; }
 | 
				
			||||||
  .row .two-thirds.column    { width: 66.6666666667%; }
 | 
					  .row .two-thirds.column    { width: 66.6666666667%; }
 | 
				
			||||||
 
 | 
				
			|||||||
		Reference in New Issue
	
	Block a user