CSS - Mobile button appears in different areas, different devices

Question

I have a button in my hybrid mobile app which when viewed on an iphone 5 is in the area i want it (middle centre).

When i view it on a iphone 6 plus it moves around, now i know this is because of my css which is very specific but i was wondering if i could get some guidance how i can position a button which remains the same between devices (same location).

This is my css, all help appreciated :)

#divheader {

    position: relative;
}

#btn {
     position:absolute;
    left: 10px;
    top: 198px;
    text-align: center;
    color: #171e28;
  background-color: #f4af03;
  border-color: #ee9f05
}

HTML

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
    <link href="kendo/styles/StyleSheet.css" rel="stylesheet" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.default.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.default.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.mobile.all.min.css" />

    <script src="http://cdn.kendostatic.com/2014.3.1411/js/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.3.1411/js/kendo.all.min.js"></script>
<body>
<body>
   <div data-role="view" style="background-color: #212a33" id = "divheader" data-title="Blocks">
       <div data-role="navbar" id="test">
           <span data-role="view-title">My View Title</span>
        </div>
       <div style="background-color: #212a33">
           <div id=test3>
       <span class="description" id="test4">Currently in stock:</span>
                    <input id="numeric" type="number" value="17" min="0" max="100" step="1" />
           </div>
       <a id="btn" data-role="button" data-click="onClick" align="center" style="margin: 0 auto; width: 300px;" >Click me!</a>
       </div>
       <div id="test2">
       </div>
       </div>
   </div>

   <script>
        // the content of the document.body is used by default
       var app = new kendo.mobile.Application();
   </script>
   <script type="text/javascript">
    var div = document.getElementById('test2');

    div.style.height = document.body.clientHeight + 'px';
</script>



</body>
</body>
</html>

Could you add your markup as well? – Topr Mar 06 '15 at 08:42 — Topr, Mar 06 '15 at 08:42

score 2 · Accepted Answer · edited May 23 '17 at 11:56

You are right, your CSS is very specific with the absolute positioning. It always has a left spacing of 10px, which with it's width of 300px works well for the iPhone 5 which is 320px wide.

If you want to center the button no matter the width of the device I would go for margin: 0 auto; which you already wrote in the inline css of the button.
For an element to work with margin: 0 auto it has to fulfil some requirements which you can see here .

Your CSS would then look something like this

#btn {
  display: block;
  margin: 0 auto; 
  width: 300px;
  color: #171e28;
  background-color: #f4af03;
  border-color: #ee9f05;
  border: 1px solid; /*For the border color to work you need a border*/
}

The widthand margin are just moved there from the Buttons style-tag in the markdown.

Of course, this moves the button back in the header so if you don't want it in there you should declare it outside of the header in your markdown.

Edit:
For the button to be centred horizontally and vertically ind a div with the full height of the viewport the above code does not work.

First thing you could do to get rid of the javascript is to give the div a heightof 100vh (like explained here), but that's personal preference I guess.

For the CSS of the Button, this should work:

#btn {
  position: absolute;
  width: 300px;
  top: 50%;
  left: 50%;
  margin-left: -150px;
  transform: translateY -50%;
  color: #171e28;
  background-color: #f4af03;

}

For the horizontal part we're giving the element a left spacing of 50%. Since it is then placed with it's left border at 50% of the page's width, we're correcting this with margin-left: -150px (moving the element back to the left by half of it's width).

For the vertical part we're doing basically the same, but we do not know the exact height here, so the position is corrected by transform: translateY -50%;.
(Source)

thank you. the only confusion i have is that yes it did move it back to the header but i thought i had closed the div tag for the navbar and thus the header should be closed. can you give me a quick run down on how to fix that please? :) — user2058234, Mar 06 '15 at 10:20
Yes, you closed the navbar-div, but the button is inside a `div` that has just the attribute `style="background-color: #212a33"`, you'll need to move the button out of this div as well to make it appear under the blue section. — chrispop, Mar 06 '15 at 10:39
Thank you again. I actually want it to appear in the blue section which is taking up the rest of the display and in the centre. No matter what i do it seems to be attaching to just under the navbar. So the 'blue' div is the right one but i cant get it to center again. (The blue div goes the rest of the display due to this javacsript var div = document.getElementById('test2'); div.style.height = document.body.clientHeight + 'px'; — user2058234, Mar 06 '15 at 10:44
I think I may have misunderstood you in the first place. So you want to center the button horizontally _and_ vertically in a div (the one with the blue background) that takes up the full height of the display? — chrispop, Mar 06 '15 at 11:02
No problem! :) I edited my answer, I guess it's easier to read then the comments. I have to admit that I never worked with kendo **and** I can't test the code on mobile right now, but I hope it helps you. — chrispop, Mar 06 '15 at 11:40

CSS - Mobile button appears in different areas, different devices

1 Answers1