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;
   }
}

Kickstart Your Career

Get certified by completing the course

Get Started