I'm quite new to skeleton but I would like to use it for a project. The project consists of 4 divs that have a maximum width of 1400px, and I would need these to scale down along with the browser. I'm not sure how I would go about altering the standard sixteen column width of 960px to 1400px and the various media queries associated with it.
Any help would be appreciated.
If anybody is interested in this, Ian Yates does a good job explaining it in this article/tutorial series:
http://webdesign.tutsplus.com/tutorials/complete-websites/building-a-responsive-layout-with-skeleton-widescreen/
It is simply a case of setting your desired min-width media query into skeleton.css and changing the values; either percentage of pixel-based. Here is mine as an example.
/* Note: Design for a width of 1400px */
@media only screen and (min-width: 1400px) {
.container { width: 1400px; } /*whatever you want - can even be fixed if you prefer*/
.container .column,
.container .columns { margin-left: 0.78125%; margin-right: 0.78125%; }
.container .one.column,
.container .one.columns { width: 4.6875%; }
.container .two.columns { width: 10.9375%; }
.container .three.columns { width: 17.1875%; }
.container .four.columns { width: 23.4375%; }
.container .five.columns { width: 29.6875%; }
.container .six.columns { width: 35.9375%; }
.container .seven.columns { width: 42.1875%; }
.container .eight.columns { width: 48.4375%; }
.container .nine.columns { width: 54.6875%; }
.container .ten.columns { width: 60.9375%; }
.container .eleven.columns { width: 67.1875%; }
.container .twelve.columns { width: 73.4375%; }
.container .thirteen.columns { width: 79.6875%; }
.container .fourteen.columns { width: 85.9375%; }
.container .fifteen.columns { width: 92.1875%; }
.container .sixteen.columns { width: 98.4375%; }
.container .one-third.column { width: 31.7708%; }
.container .two-thirds.column { width: 65.1041%; }
/* Offsets */
.container .offset-by-one { padding-left: 6.25%; }
.container .offset-by-two { padding-left: 12.5%; }
.container .offset-by-three { padding-left: 18.75%; }
.container .offset-by-four { padding-left: 25%; }
.container .offset-by-five { padding-left: 31.25%; }
.container .offset-by-six { padding-left: 37.5%; }
.container .offset-by-seven { padding-left: 43.75%; }
.container .offset-by-eight { padding-left: 50%; }
.container .offset-by-nine { padding-left: 56.25%; }
.container .offset-by-ten { padding-left: 62.5%; }
.container .offset-by-eleven { padding-left: 68.75%; }
.container .offset-by-twelve { padding-left: 75%; }
.container .offset-by-thirteen { padding-left: 81.25%; }
.container .offset-by-fourteen { padding-left: 87.5%; }
.container .offset-by-fifteen { padding-left: 93.75%; }
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With