Last active
December 15, 2018 19:01
-
-
Save dubrod/4382170 to your computer and use it in GitHub Desktop.
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 %.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*~~~~ 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%;} } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Here's a template I used it in. http://revitalagency.com/sandbox/2013-adaptive/