Buttons are central on PC but not on phone? - Html/Css

Question

I made a simple search engine, all works well except for the design aspect. On the PC, the buttons appear top central but as soon as we get the design up on a phone, buttons are top right.

Applied one change, this is the updated version.

Phone: Android, Samsung Galaxy S4, 5 Inch 1080x1920

Full Code

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Search</title>



    <style>
    *{margin:0px;
    padding:0px;
    }

    #menu {
    height:38px;
    padding-top:0px;
    background-color:white;
    margin-left: auto
    margin-right: auto
    }

    .photo {
        position:relative;
        font-family:arial;  
        overflow:hidden;
        border:0px;
        width:811px;
        height:98px;
        margin-left:250px;
    }   

        .photo .heading, .photo .caption {
    position:absolute;
    background:#000;
    height:50px;
    width:816px;
    opacity:0.6;
        }

        .photo .heading { 
            top:-50px;
        }

        .photo .caption {
    bottom:-42px;
    left:3px;
        }

        .photo .heading span {
            color:#26c3e5;  
            top:-50px;
            font-weight:bold;
            display:block;
            padding:5px 0 0 10px;
        }

        .photo .caption span{
            color:#FF0;
            font-size:16px;
            display:block;
            padding:5px 10px 0 10px;
        }

    .footer {
    font-family: Calibri;
    font-size: 18px;
    color: #000;
}
    head {
    text-align: center;
}
    menu1 {
    text-align: center;
}
    .footer a {
    text-align: center;
}
    .menuhead {
    font-family: Calibri;
}
    .menuhead {
    font-size: 24px;
}
    .menuhead {
    font-size: 18px;
}
    .footer1 {
    text-align: left;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size: 18px;
    color: #000;
}
    </style>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="menu"><ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="/search/books/index.html">Books</a>      </li>
      <li><a href="/search/list.php">Add Url</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Contact Us</a></li>
</ul></div>

    <p><center>
      <p class="menuhead"><br>
      </p>
      <br>
    </center>

</div>
<center>
<p class="footer1">&nbsp;</p>
<p class="footer1">&nbsp;</p>
<p class="footer1">&nbsp;</p>
<p class="footer1">&nbsp;</p>
<p class="footer1">&nbsp;</p>
<img src="images/img2.png" width="817" height="110">
</center>
<form action="/search/search.php" method='GET'>

  <center> 
    <p><br>
    </p>
    <p>&nbsp;</p>
    <p>
      <input name='search' type='text' class="footer1" size='50'></font></p>
    <p>&nbsp;</p>
  </center>


<p class="footer1"><center>
  <input name='submit' type='submit' class="footer1" value='Search Now'>
  </center>
</p>
</form>
<p class="footer1">&nbsp;</p>
<p class="footer1">&nbsp;</p>
<p class="footer1">&nbsp;</p>
<p class="footer1">&nbsp;</p>
<p class="footer1">&nbsp;</p>
<p class="footer1">
<p class="footer1">
<p class="footer1">
<center>

<g:plusone size="tall" annotation="i0nline"></g:plusone>


<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
</center></p>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

"a phone" is too broad. Which OS, which version, which browser? We also need a full reproducible example, not just some CSS. — user247702, Aug 18 '15 at 15:40
Do start with http://stackoverflow.com/questions/18424798/twitter-bootstrap-3-how-to-use-media-queries before you write any CSS — Roy M J, Aug 18 '15 at 15:41
We need more details and code. I can already say that you CSS here looks strange (whats the `margin-right: -50%` for? Why aren't there any prefixes on `transform`? Why do you define your left and top values in `pixels`?). Also @RoyMJ There is no need for Media Queries right away. It depends, but most of the time you can use the same code cross-browser and cross-device. — somethinghere, Aug 18 '15 at 15:41
"margin-right :-50% " might be a problem. try to use "margin: 0 auto" for center positioning of element. — Sachin Kadam, Aug 18 '15 at 15:42

Rohit Kumar · Answer 1 · 2015-08-18T16:22:47.483

0

changed the line left: 500px to left: 50%;

#menu {
height:38px;
padding-top:0px;
background-color:white;
position: absolute;
top: 19px;
left: 50%; /* here it is */
margin-right: -50%; /* also this might be causing problem so try removing this line */
transform: translate(-50%, -50%) }
}

you can use this way to make your menu items align horizontally -

#menu ul li {
display: inline-block;
margin: ; /* add any margin you need between those buttons */
}

and to center the whole menu use the above method I described by removing margin-right: -50% OR go with margin: 0 auto; as suggested by others.

edited Aug 18 '15 at 16:22

answered Aug 18 '15 at 15:49

Rohit Kumar

2,048
1
14
28

Removing the margin-right causes the buttons to form vertically. – user5180991 Aug 18 '15 at 15:54
what means by that? _causes the buttons to form vertically_ ?? – Rohit Kumar Aug 18 '15 at 15:59
They are not placed in a horizontal row but in a vertical column – user5180991 Aug 18 '15 at 16:01
@user5180991 what happens when you add `left: 50%` and let the `margin-right: -50%` be there.. – Rohit Kumar Aug 18 '15 at 16:04
Weirdly it stayed the same but trying something different now – user5180991 Aug 18 '15 at 16:08
@user5180991 do you want your menu items to like as they are in this fiddle - http://jsfiddle.net/r870m0z9/ – Rohit Kumar Aug 18 '15 at 16:15
@user5180991 check my updated answer. – Rohit Kumar Aug 18 '15 at 16:23

Adam Buchanan Smith · Accepted Answer · 2015-08-18T16:22:37.030

0

Take a look at my fiddle, the blue box is your old menu and the red box is my new menu.

https://jsfiddle.net/mykx37n9/4/

see how the red box stays centered, I used margin-left: auto margin-right: auto

#menu-2 {
    height:38px;
    width: 50px;
    margin-left: auto;
    margin-right: auto;
    background-color: red;

    }

You had your margin set to a fix sized, by changing it to auto it is now a relative size based off screen width.

EDITED FOR UPDATED QUESTION

Use this:

#menu {
height:38px;
padding-top:0px;
background-color:white;
text-align: center;
}

Here is the fiddle http://jsfiddle.net/28m3fpcv/6/

Also, remove this css, it is not valid:

    head {
    text-align: center;
}
    menu1 {
    text-align: center;
}

edited Aug 18 '15 at 16:22

answered Aug 18 '15 at 15:52

Adam Buchanan Smith

9,422
5
19
39

This is brilliant for the desktop, but as soon as I check my Samsung S4 Android phone on chrome, it still appears slanted to the right. – user5180991 Aug 18 '15 at 15:58
It will be because there is a different issue in one of your parent DIV's, try adding some more code to your question, so we can see where you are having the issue. Most likely a @media query – Adam Buchanan Smith Aug 18 '15 at 16:00
@user5180991 Give us your css for your media queries, I bet the problem will be there. – Adam Buchanan Smith Aug 18 '15 at 16:01
@user5180991 and to be clear, this works always. (brilliant for desk top and mobile)....,. :) – Adam Buchanan Smith Aug 18 '15 at 16:03
It's on now, check above – user5180991 Aug 18 '15 at 16:09
@user5180991 I updated my answer, is this what you are looking for? – Adam Buchanan Smith Aug 18 '15 at 16:19
Perfect , I'd probably just have the menu at the top in a vertical row – user5180991 Aug 18 '15 at 16:22
Also, I made one more edit. You have some invalid css in your code. – Adam Buchanan Smith Aug 18 '15 at 16:23
Phew, thanks man looks great! – user5180991 Aug 18 '15 at 16:24
And here is for horizontal alignment http://jsfiddle.net/28m3fpcv/7/ – Adam Buchanan Smith Aug 18 '15 at 16:25
1

Great to know people like you can offer such good help :D – user5180991 Aug 18 '15 at 16:27

Buttons are central on PC but not on phone? - Html/Css

2 Answers2