How to make my header looks better on Mobile - css

Question

Heres my problem how can i make my header looks better
Following is the coding ...!!
1 Index.php
<div class="header">
<div class="headerFont">Yo! Yo! Honey Singh..!!
</div>
<div class="Login">
<form>
Email :<input type="text">
Password :<input type="password">
<input type="submit" value="Login" >
<input type="button" value="register">
</form>
</div>
</div>
2 Web-Style.css
.header{
top:0;
left:0;
padding:10px;
background:#00688B;
width:100%;
height:footer-<length>;
box-shadow:2px 2x 5px #08298A;
border:1px solid black;
text-shadow:2px 2px black;
}
.header a{
color:white;
}
.headerFont{
font-family:MATURA MT ;
font-size:22px;
display:table-cell;
}
.Login{
display:block;
position:absolute;
top:15px;
right:50px;
}
3 Mobile-Style.css
.header {
width: auto;
}
Now i need to know how can i get button like the website[PIC] -> http://i.stack.imgur.com/vlx09.png
How do i make button visible on mobile but not on pc borwsers ..???

Answer 1

Create the button you want on the mobile version of the website.
Add CSS that makes the button invisible (eg, display: none).
Use CSS with media queries to show the button on mobile devices.
More details here:
http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

Answer 2

you can do this using javascript and checking the requesting browser's type.
You can detect mobile broswer's request using javascript like following.
if ((screen.width < 480) || (screen.height < 480)) {
location.replace('/mobile/');
/*Get buggon element by id and show it else hide it*/
}
or may be you can use following javascript to detent mobile browser and then hide the button.
https://github.com/miohtama/detectmobile.js