Hi there,
I feel like this should be really simple for me to figure out, though I am not able to get this to work and I cannot find an answer anywhere online.
I am creating an HTML page with 7 boxes 175px X 175px (Each one to be like a button later on). What I want is for the layout to change according to the orientation of the iPad screen.
EX: Horizontally, the boxes would fit into about 2 rows...vertically the boxes would be in 3 or 4 rows.
When I rotate the screen now, the boxes just get smaller...they don't rearrange. Can anyone help please?
Here is my CSS and HTML:
<style type="text/css">
#wrapper {
position:relative;
width:100%;
height:900px;
background-color:#ffffff;
min-width: 395px;
max-width: 780px;
min-height: 395px;
max-height: 780px;
}
.row {
width:60%;
height:auto;
margin: 0 auto;
padding: 10px;
}
.box {
width: 175px;
height: 175px;
background-color: #999;
border-radius:25px;
margin: 10px;
float:left;
}
.boxTitle{
font-size: medium;
color: #FFF;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-align: center;
padding-top: 5px;
height: 50px;
}
.box form .goButton {
background: url(goButton.png) no-repeat;
width: 97px;
height: 40px;
font-size: 0px;
border: 0px;
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 110px;
}
</style>
<div id="wrapper">
<div class="row">
<div class="box"><p class="boxTitle">Township Board Information</p><form>
<input name="go" type="button" value="Go" class="goButton"/>
</form></div>
<div class="box"><p class="boxTitle">MyYTown Ticket Management</p><form>
<input name="go" type="button" value="Go" class="goButton"/>
</form></div>
<div class="box"><p class="boxTitle">Computer Support Tools</p><form>
<input name="go" type="button" value="Go" class="goButton"/>
</form></div>
<div class="box"><p class="boxTitle">Remote Applications</p><form>
<input name="go" type="button" value="Go" class="goButton"/>
</form></div>
<div class="box"><p class="boxTitle">BSA Online Lookups</p><form>
<input name="go" type="button" value="Go" class="goButton"/>
</form></div>
<div class="box"><p class="boxTitle">Employee Portals</p><form>
<input name="go" type="button" value="Go" class="goButton"/>
</form></div>
<div class="box"><p class="boxTitle">App Tools</p><form>
<input name="go" type="button" value="Go" class="goButton"/>
</form></div>
</div>
</div>