<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<head>
CSS
-------
church_display_tbl {width: 100%;
height: 100px;
padding-left: 5px;
float: left;
}
#church_data_div {
height:445px;
overflow :scroll ;
}
#church_tbl {
margin-top: 40px;
width: 210px;
height: 150px;
font-size: 13px;
float: left;
}
@media only screen and (min-width:150px) and (max-width:600px) {
#church_data_div {
height:150px;
overflow :scroll ;
}
}
HTML
----------
<table>
<tr>
<td>
<asp:DataList ID="church_datalist" runat="server" RepeatDirection="Horizontal" ShowFooter="False" ShowHeader="False" CellPadding="5" RepeatLayout="Flow" HorizontalAlign="Left" Width="100%">
<ItemStyle Height ="100%" />
<ItemTemplate>
<div style="margin:2px;padding:2px;height:100px">
<table id="church_tbl">
<tr>
<td>
<asp:Label ID="Label1" runat="server" Text="Church Name:"></asp:Label></td>
<td>
<asp:Label ID="Label2" runat="server" Text='<% #Bind("church_name")%>'></asp:Label></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>
<asp:Label ID="Label7" runat="server" Text="Ph:"></asp:Label></td>
<td>
<asp:Label ID="Label8" runat="server" Text='<% #Bind("church_ph")%>'></asp:Label></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>
<asp:Label ID="Label3" runat="server" Text="Address:"></asp:Label></td>
<td>
<asp:Label ID="Label4" runat="server" Text='<% #Bind("church_address")%>'></asp:Label></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>
<asp:Label ID="Label5" runat="server" Text="District:"></asp:Label></td>
<td>
<asp:Label ID="Label6" runat="server" Text='<% #Bind("district")%>'></asp:Label></td>
</tr>
</table>
</div>
</ItemTemplate>
</asp:DataList>
</td>
</tr>
</table>
</div>
