jQuery Mobile - Responsive grids



The standard grid is made responsive by overiding the grid styles below a single breakpoint. max-width is used as an override to apply the stacked styling. To scope the styles for media query include class my-breakpoint. You can include additional breakpoint or customize the appearance further.

@media all and (max-width: 35em) {
   .my-breakpoint .ui-block-a,
   .my-breakpoint .ui-block-b,
   .my-breakpoint .ui-block-c,
   .my-breakpoint .ui-block-d,
   .my-breakpoint .ui-block-e {
      width: 100%;
      float: none;
   }
}
jquery_mobile_layouts.htm
Advertisements