jquery mobile responsive grids

Friday, July 4, 2014

I am building a jquery mobile app and I want to implement responsive three column design. Side columns are just fillers like instagram. The side columns become minimum width on small screen like 10% on bigger screen they can occupy 25% of space.


style:



.min-width-320px .leftcol, .max-width-480px .leftcol {
width:10%;
}

.min-width-480px .leftcol, .max-width-768px .leftcol {
width:25%;
}

.leftcol {
position:relative;
top:-10px;
left:-10px;
float:left;
width:220px; /* for IE5/WIN */
voice-family: "\"}\"";
voice-family:inherit;
margin:0 0 -10px 0;
padding:10px;
background:#e9e9e9;
z-index:100;
border-right:1px solid #bebebe;
height:100%;
}

.min-width-320px .rightcol, .max-width-480px .rightcol {
width:10%;
}

.min-width-480px .rightcol, .max-width-768px .rightcol {
width:25%;
}

.rightcol {
position:relative;
top:-10px;
right:-10px;
float:right;
voice-family: "\"}\"";
voice-family:inherit;
width:220px; /* actual value */
margin:0 0 -10px 0;
padding:10px;
background:#e9e9e9;
z-index:99;
border-left:1px solid #bebebe;
height:100%;
}

#centercol {
position:relative;
padding:0 240px;
background:#dadbdc;
}


And in body in main content div



<div id="leftcol" class="leftcol"><!-- begin leftcol -->
&nbsp;
</div><!-- end leftcol -->

<div id="rightcol" class="rightcol"><!-- begin rightcol -->
&nbsp;</p>

</div><!-- end righttcol -->

<div id="centercol"><!-- begin centercol -->
This is center col
</div><!-- end centercol -->


but when i try it on small resolution it is not resize the content.







http://ift.tt/1qxa2WT