BitGoblin/Bones
1
0
Fork 0
Code Issues 5 Pull Requests Packages Projects Releases Wiki Activity

Update skeleton.css to reflect newer screen sizes

Browse Source 
added additional mobile portrait and landscape @media selectors for common smartphone sizes (device width: 360px)
This commit is contained in:
Kagerou 2014-05-20 21:14:35 +09:00
parent 7ab682091d
commit 3e95b49839
1 changed files with 82 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
stylesheets/skeleton.css vendored
View File

@ -129,7 +129,7 @@
/* Note: Design for a width of 320px */
@media only screen and (max-width: 767px) {
@media only screen and (max-width: 320px) {
.container { width: 300px; }
.container .columns,
.container .column { margin: 0; }
@ -174,13 +174,10 @@
}
/* #Mobile (Landscape)
================================================== */
/* Note: Design for a width of 360px */
/* Note: Design for a width of 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {
.container { width: 420px; }
@media only screen and (min-width: 321px) and (max-width: 479px) {
.container { width: 340px; }
.container .columns,
.container .column { margin: 0; }
@ -202,9 +199,86 @@
.container .fifteen.columns,
.container .sixteen.columns,
.container .one-third.column,
.container .two-thirds.column { width: 420px; }
.container .two-thirds.column { width: 340px; }
/* Offsets */
.container .offset-by-one,
.container .offset-by-two,
.container .offset-by-three,
.container .offset-by-four,
.container .offset-by-five,
.container .offset-by-six,
.container .offset-by-seven,
.container .offset-by-eight,
.container .offset-by-nine,
.container .offset-by-ten,
.container .offset-by-eleven,
.container .offset-by-twelve,
.container .offset-by-thirteen,
.container .offset-by-fourteen,
.container .offset-by-fifteen { padding-left: 0; }
}
/* #Mobile (Landscape)
================================================== */
/* Note: Design for a width of 480px */
@media only screen and (min-width: 480px) and (max-width: 639px) {
.container { width: 460px; }
.container .columns,
.container .column { margin: 0; }
.container .one.column,
.container .one.columns,
.container .two.columns,
.container .three.columns,
.container .four.columns,
.container .five.columns,
.container .six.columns,
.container .seven.columns,
.container .eight.columns,
.container .nine.columns,
.container .ten.columns,
.container .eleven.columns,
.container .twelve.columns,
.container .thirteen.columns,
.container .fourteen.columns,
.container .fifteen.columns,
.container .sixteen.columns,
.container .one-third.column,
.container .two-thirds.column { width: 460px; }
}
/* Note: Design for a width of 640px */
@media only screen and (min-width: 640px) and (max-width: 767px) {
.container { width: 620px; }
.container .columns,
.container .column { margin: 0; }
.container .one.column,
.container .one.columns,
.container .two.columns,
.container .three.columns,
.container .four.columns,
.container .five.columns,
.container .six.columns,
.container .seven.columns,
.container .eight.columns,
.container .nine.columns,
.container .ten.columns,
.container .eleven.columns,
.container .twelve.columns,
.container .thirteen.columns,
.container .fourteen.columns,
.container .fifteen.columns,
.container .sixteen.columns,
.container .one-third.column,
.container .two-thirds.column { width: 620px; }
}
/* #Clearing
================================================== */