The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Fixed div sizes on screen rotation
rbush
post Apr 15 2014, 10:03 AM
Post #1





Group: Members
Posts: 5
Joined: 15-April 14
Member No.: 20,727
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 smaller...though they are still proportionate. I have the boxes set at 175px x 175px for either orientation.

I have included a JPEG of what I am trying to accomplish.

CODE

@media all and (orientation: portrait){
#wrapper {
    background-color: #ffffff;
}
.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: 1%;
    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: 20%;
    margin-left: 110px;
}
}
@media all and (orientation: landscape){
#wrapper {
    background-color:#ffffff;
}
.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: 1%;
    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: 20%;
    margin-left: 110px;
}
}


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 Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 15 2014, 10:34 AM
Post #2


.
********

Group: WDG Moderators
Posts: 9,656
Joined: 10-August 06
Member No.: 7
QUOTE(rbush @ Apr 15 2014, 05:03 PM) *

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 smaller...though they are still proportionate.

AFAICS they're of the same size in the screenshot. There's different spaces between the .box divs though, maybe that's caused by the 1% margin?

BTW the screenshot doesn't show any border-radius, as specified in the code example --either the CSS is different or the screenshot browser didn't support border-radius.

You might simplify the CSS by not repeating the same rules for both portrait and landscape.
User is online!PM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
rbush
post Apr 15 2014, 10:39 AM
Post #3





Group: Members
Posts: 5
Joined: 15-April 14
Member No.: 20,727
I do not know what AFAICS means?

Yes, as I said I have included a JPEG of what I am TRYING to accomplish. Just a quick layout to explain my goal, spacing is not exact or important in my JPEG.

It is not a representation of what I currently have, which is why I included my HTML and CSS code.

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
Blue is the row
Orange is the boxes
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 15 2014, 12:43 PM
Post #4


.
********

Group: WDG Moderators
Posts: 9,656
Joined: 10-August 06
Member No.: 7
QUOTE(rbush @ Apr 15 2014, 05:39 PM) *

I do not know what AFAICS means?

As far as I can see...

QUOTE
Yes, as I said I have included a JPEG of what I am TRYING to accomplish.

My mistake, sorry.

I still suspect the percent margin may affect box spacing in different viewport sizes. What happens if you use a px unit instead?
Edit: forget that, I was still thinking of the box spacing, not sizing. blush.gif

This post has been edited by Christian J: Apr 15 2014, 03:52 PM
User is online!PM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
rbush
post Apr 15 2014, 01:08 PM
Post #5





Group: Members
Posts: 5
Joined: 15-April 14
Member No.: 20,727
Nothing much really happens. I changed it to 20px. The boxes still do not stay the same size upon rotation.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 15 2014, 03:51 PM
Post #6


.
********

Group: WDG Moderators
Posts: 9,656
Joined: 10-August 06
Member No.: 7
You're not using something that changes the zoom amount of the page? Do other objects on the page change size too? I'm not too familiar with e.g.

CODE
<meta name="viewport" ...>

and its values, perhaps it can be used for changing zoom level between portrait and landscape modes.

User is online!PM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
rbush
post Apr 16 2014, 08:41 AM
Post #7





Group: Members
Posts: 5
Joined: 15-April 14
Member No.: 20,727
No, I am not using anything to change the zoom, nor do I want to. The text within the box divs changes size too since as I said everything remains proportionate, just changes size.

I only want the layout to rearrange. No zooming, no scaling.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 16 2014, 11:15 AM
Post #8


.
********

Group: WDG Moderators
Posts: 9,656
Joined: 10-August 06
Member No.: 7
That does sound like page zooming. Maybe it happens by default? It may even be considered a feature of a fluid layout.

I'm not experienced with any of this, but there's a lot to read about mobile viewports here: http://www.quirksmode.org/mobile/
User is online!PM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
rbush
post Apr 16 2014, 03:10 PM
Post #9





Group: Members
Posts: 5
Joined: 15-April 14
Member No.: 20,727
Perfect!
<meta name="viewport" content="initial-scale=1" />
solved my problem.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
mamahadija
post Apr 20 2014, 01:58 PM
Post #10





Group: Members
Posts: 3
Joined: 20-April 14
Member No.: 20,751
what if u use % for sizes
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Cascading Style Sheets · Next Newest »
 

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 24th April 2024 - 09:22 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC