Created
December 26, 2012 18:37
-
-
Save anonymous/4382116 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 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