Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Apr 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    screen rotation - change layout but do not scale contents

    Hi there,

    I am creating an HTML page that will be used as a tablet "app". Currently I am testing on an iPad, but in the future this will be used on other tablets.

    I have my CSS set up to detect the orientation of the tablet (portrait or landscape) and change the layout accordingly, which is working.

    I am having trouble figuring out how to keep my .box divs the same size on rotation. When going from landscape to portrait they appear to be getting scaled down. I have the boxes set at 175px x 175px for either orientation.

    I have included a JPEG of what I am trying to accomplish. The "borders" are just to show where my divs are in the JPEG. I do not have nor do I want them in my code.

    Red is the wrapper div
    Blue is the row div
    Orange is the boxes

    Code:
    #wrapper {
        background-color:#ffffff;
    }
    .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: 20%;
    	margin-left: 110px;
    }
    @media all and (orientation: portrait){
    .row {
    	max-height: 2560px;
    	min-height: 1024px;
    	max-width: 1600px;
    	min-width: 600px;
    	margin-left: auto;
    	margin-right: auto;
    	border: medium solid #06F;	
    	overflow: hidden;
    }
    .box {
        width: 175px;
    	height: 175px;
        background-color: #999;
    	border-radius: 25px;
        margin: 20px;
    	float: left;
    }
    }
    @media all and (orientation: landscape){
    .row {
    	max-height: 1600px;
    	min-height: 600px;
    	width: 900px;
    	margin-left: auto;
    	margin-right: auto;
    	border: medium solid #06F;
    	overflow: hidden;
    }
    .box {
        width: 175px;
    	height: 175px;
        background-color: #999;
    	border-radius: 25px;
        margin: 20px;
    	float: left;
    }
    }
    Code:
    <body>
    <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>
    </body>
    Attached Thumbnails Attached Thumbnails screen rotation - change layout but do not scale contents-tabletlayout.jpg  

  • #2
    New to the CF scene
    Join Date
    Apr 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I couldn't find where to edit my previous post, but I have updated my code a bit...still doesn't seem to solve my problem.

    Code:
    #wrapper {
        background-color:#FFFFFF;
    }
    .boxTitle{
    	font-size: 18px;
    	color: #FFFFFF;
    	font-family: Arial, Helvetica, sans-serif;
    	font-weight: bold;
    	padding-top: 5px;
    	height: 50px;
    }
    .row{
    	margin-left: auto;
    	margin-right: auto;
    	border: medium solid #06F;
    	overflow: hidden;
    }
    .box {
        width: 175px;
    	height: 175px;
        background-color: #999;
    	border-radius: 25px;
        margin: 20px;
    	float: left;
    	text-align: center;
    }	
    
    @media all and (orientation: portrait){
    .row {
    	max-height: 2560px;
    	min-height: 1024px;
    	max-width: 1600px;
    	min-width: 600px;
    }
    }
    @media all and (orientation: landscape){
    .row {
    	max-height: 1600px;
    	min-height: 600px;
    	max-width: 2560px;
    	min-width: 1024px
    }
    }
    Code:
    <body>
    <div id="wrapper">
        <div class="row">
            <div class="box"><p class="boxTitle">Township Board Information</p>
              <img src="placeholder.png" width="88" height="83" />
              </div>
            <div class="box"><p class="boxTitle">MyYTown Ticket Management</p><img src="placeholder.png" width="88" height="83" /></div>
            <div class="box"><p class="boxTitle">Computer Support Tools</p><img src="placeholder.png" width="88" height="83" /></div>
            <div class="box"><p class="boxTitle">Remote Applications</p><img src="placeholder.png" width="88" height="83" /></div>
            <div class="box"><p class="boxTitle">BSA Online Lookups</p><img src="placeholder.png" width="88" height="83" /></div>
            <div class="box"><p class="boxTitle">Employee Portals</p><img src="placeholder.png" width="88" height="83" /></div>
            <div class="box"><p class="boxTitle">App Tools</p><img src="placeholder.png" width="88" height="83" /></div>
        </div>
    </div>
    </body>


  •  

    Posting Permissions

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