Created

Embed URL

HTTPS clone URL

SSH clone URL

You can clone with HTTPS or SSH.

Download Gist

jQuery Mobile - Responsive Grids (Grids on mobile drop down to less columns)

View jquery_mobile_smart_grids
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80
/*
 
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.