Hi,
I am making an adaptive page using CSS. I have a trouble with the mobile version that the vertical position of the elements in the page varies from phone to phone. I've managed the page to look all right on my Blackberry and on iPhone, but on Samsung it's complete mess.
The code I use is like this:
body {
background: url(bgr-vertical.jpg);
background-repeat: no-repeat;
background-size: 100%;
width: 100%;
padding-top: 300%;
}
...
#firstcolumn {
position: absolute;
top: 74%;
left: 5%;
width: 90%;
height: 15.5%;
}
...
The body tag sizes the page according to the background image, which has an aspect ratio 1x3. Then I position other elements, like <div id="#firstcolumn">, etc. So, for each phone the vertical positions appear different. For Blackberry and iPhone they are approximately the same but in Samsung phones everything gets shifted.
What would be a good way to make everything look the same on all phones?
And a related question, how are these % calculated in
top: 74%; ? I would expect this to be % of the <body> height (as <body> is the ancestor for this <div> element), but for the lowest element I had to set
top: 200%; So, as the values can be above 100%, it should be the percentage of something else, not of the <body> height?
