diff --git a/stylesheets/skeleton.css b/stylesheets/skeleton.css index 5db3d38..b749321 100644 --- a/stylesheets/skeleton.css +++ b/stylesheets/skeleton.css @@ -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 ================================================== */