How To Do A Responsive 2 Column Grid in Jquery Mobile


How to Do A Responsive Two-Column Grid Using Jquery Mobile Framework

YOUR CSS:

<style>
@media all and (max-width: 50em) {
.my-breakpoint .ui-block-a, 
.my-breakpoint .ui-block-b
 { 
width: 100%; 
float:none; 
}
}
@media all and (min-width: 75em) {
.my-breakpoint.ui-grid-a .ui-block-a { width: 49.95%; }
.my-breakpoint.ui-grid-a .ui-block-b { width: 49.925%; }
.my-breakpoint.ui-grid-a .ui-block-a { clear: left; }
}
}
</style>

YOUR HTML:

<div class="ui-grid-a my-breakpoint">
<div class="ui-block-a">
say something...</div>
<div class="ui-block-b">
say somthing</div>    
</div>

Comments