prodio
Version:
Simplified project management
41 lines (40 loc) • 1.57 kB
CSS
/**
* Sets the grids maximum width
* @var $grid-max-width (pixels|ems|percentage)
*/
/*!
* Sets the grids breakpoint
*
* To add a new break point you'll need to add an element to the list.
*
* Here's an example: ( class-name-prefix, minimum-width, maximum-width, gutter-width, no-media-query).
*
* class-name-prefix: this is the prefix used in tons of inks classes i.e.: large-100, small-40, etc.
* minimum-width: (pixels|null) the minimum width for the breakpoint
* maximum-width: (pixels|null) the maximum width for the breakpoint
* gutter-width: (ems) the width for the gutters (space between grid columns) for the breakpoint
* no-media-query: (true|false) if you need to support IE8 set this to true on a single breakpoint.
* Since IE8 does not support the @media statement leaving one of the breakpoints
* outside a @media query let's you use the grid in IE8.
*
*/
/* for xlarge screens */
@media screen and (min-width: 1261px) {
/* your css for xlarge screens goes here ... */
}
/* for large screens */
@media screen and (min-width: 961px) and (max-width: 1260px) {
/* your css for large screens goes here ... */
}
/* for medium screens */
@media screen and (min-width: 641px) and (max-width: 960px) {
/* your css for medium screens goes here ... */
}
/* for small screens */
@media screen and (min-width: 321px) and (max-width: 640px) {
/* your css for small screens goes here ... */
}
/* for tiny screens */
@media screen and (max-width: 320px) {
/* your css for tiny screens goes here ... */
}