| /*~~~~ 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%;} } |
This comment has been minimized.
Here's a template I used it in. http://revitalagency.com/sandbox/2013-adaptive/