www.webdeveloper.com
Results 1 to 3 of 3

Thread: Layout Compatible for iPad

  1. #1
    Join Date
    Apr 2014
    Posts
    2

    Layout Compatible for iPad

    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:

    Code:
    <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>

  2. #2
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    1,033
    Have you tried adding the 'viewport' <meta> tag?
    HTML Code:
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    As a side note, because you are applying some max-width values to #wrapper, and a 60% width to the row class, it seems that natively these boxes are limited to 2 columns (regardless of how much additional width may be avaible). I'm not really sure either of those properties are necessary.

  3. #3
    Join Date
    Apr 2014
    Posts
    2
    Found a solution

    I used the following in the css file:
    @media all and (orientation: portrait){...}
    @media all and (orientation: landscape){...}

    I still need to do some touch ups, but I got the main problem solved.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles