Skip to content

@ryanilg /jquery_mobile_smart_grids
Created

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
jQuery Mobile - Responsive Grids (Grids on mobile drop down to less columns)
/*
JQUERY MOBILE GRID MODIFICATIONS
CREATED BY RYAN ILG
RYAN@RYANILG.COM
CREATED: Tue Sep 11 10:48:18 PDT 2012
*/
/* GLOBAL
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
.ui-grid-a,
.ui-grid-b,
.ui-grid-c,
.ui-grid-d {
padding: 15px;
}
@media (max-width: 767px) {
/* COLUMN IS FORCED TO BE FULL WIDTH */
.ui-grid-a .ui-block-full,
.ui-grid-b .ui-block-full,
.ui-grid-c .ui-block-full,
.ui-grid-d .ui-block-full {
float: none;
margin-right: auto;
width: auto !important;
}
.ui-grid-a > .ui-block-full:last-child,
.ui-grid-b > .ui-block-full:last-child,
.ui-grid-c > .ui-block-full:last-child,
.ui-grid-d > .ui-block-full:last-child {
border-bottom: none;
}
/* TWO COLUMNS BECOMES 1 */
.ui-grid-a .ui-block-a, .ui-grid-a .ui-block-b {
width: 49.95%;
}
.ui-grid-a > *:nth-child(n) {
margin-right: -0.5px;
width: 50%;
}
/* THREE COLUMNS BECOMES TWO */
.ui-grid-b .ui-block-a, .ui-grid-b .ui-block-b, .ui-grid-b .ui-block-c {
width: 49.95%;
}
.ui-grid-b > *:nth-child(n) {
margin-right: -0.5px;
width: 50%;
}
/* FOUR COLUMNS BECOMES TWO*/
.ui-grid-c .ui-block-a, .ui-grid-c .ui-block-b, .ui-grid-c .ui-block-c, .ui-grid-c .ui-block-d {
width: 49.95%;
}
.ui-grid-c > *:nth-child(n) {
margin-right: -0.5px;
width: 50%;
}
/* FIVE COLUMNS BECOMES THREE */
.ui-grid-d .ui-block-a, .ui-grid-d .ui-block-b, .ui-grid-d .ui-block-c, .ui-grid-d .ui-block-d, .ui-grid-d .ui-block-e {
width: 33.25%;
}
.ui-grid-d > *:nth-child(n) {
width: 33.333%;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.