public
Last active

2013 Adaptive CSS Containers Snippet. From 1600+ to Mobile. This snippet will keep a nice margin on the sides of your container for browser size most used in 2012. It's not a Responsive Snippet, that would be using %.

  • Download Gist
2013 Adaptive CSS Containers
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38
/*~~~~ CONTAINERS December 2013 - http://www.w3counter.com/globalstats.php ~~~~*/
/* 1600x900 4.09% */
.container{
margin: 0 auto;
padding:0;
height:auto;
width:1410px; /* 3 Columns would be 470px */
}
/* 1440x900 5.26% */
@media (max-width: 1440px){ .container{width: 1230px; /* 3 Columns would be 410px */ } }
/* 1366x768 20% */
@media (max-width: 1366px){ .container{width: 1170px; /* 3 Columns would be 390px */} }
/* 1280x1024 5.20% */
@media (max-width: 1280px){ .container{width: 1020px; /* 3 Columns would be 340px */} }
/* 1024x768 12.06% */
@media (max-width: 1024px){ .container{width: 960px; /* 3 Columns would be 320px */} }
/* anything below 960 is Tablet vertical or phone - 768x1024 - 5.06% */
@media (max-width: 960px){ .container{width: 100%;} }
 
 
/*~~~~ CONTAINERS November 2012 - http://www.w3counter.com/globalstats.php ~~~~*/
/* 1600x900 3.70% */
.container{
margin: 0 auto;
padding:0;
height:auto;
width:1410px; /* 3 Columns would be 470px */
}
/* 1440x900 5.97% */
@media (max-width: 1440px){ .container{width: 1230px; /* 3 Columns would be 410px */ } }
/* 1366x768 19.20% */
@media (max-width: 1366px){ .container{width: 1170px; /* 3 Columns would be 390px */} }
/* 1280x1024 7.08% */
@media (max-width: 1280px){ .container{width: 1020px; /* 3 Columns would be 340px */} }
/* 1024x768 14.07% */
@media (max-width: 1024px){ .container{width: 960px; /* 3 Columns would be 320px */} }
/* anything below 960 is Tablet vertical or phone */
@media (max-width: 960px){ .container{width: 100%;} }

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.