team2005
asked on
Resize web page to mobile phones
Hi!
I have this included css3 file,
when i used this on my webpage, all works fine..
But when i open this webpage on my mobile device
the form is very small ?
What do i need to do to get the form rezised when i use the webpage on my mobile ?
I have this included css3 file,
when i used this on my webpage, all works fine..
But when i open this webpage on my mobile device
the form is very small ?
What do i need to do to get the form rezised when i use the webpage on my mobile ?
<style>
html, body
{
height: 100%;
}
body
{
font: 12px 'Lucida Sans Unicode', 'Trebuchet MS', Arial, Helvetica;
margin: 0;
background-color: #614912;
}
/*--------------------*/
#login
{
background-color: #614912;
border: none ! important;
box-shadow: none ! important;
outline: none ! important;
max-width: 400px;
margin: -150px 0 0 -230px;
padding: 30px;
position: absolute;
top: 50%;
left: 50%;
z-index: 0;
}
/*--------------------*/
h1
{
text-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0px 2px 0 rgba(0, 0, 0, .5);
text-transform: uppercase;
text-align: center;
color: #666;
margin: 0 0 30px 0;
letter-spacing: 4px;
font: normal 26px/1 Verdana, Helvetica;
position: relative;
}
h1:after, h1:before
{
background-color: #777;
content: "";
height: 1px;
position: absolute;
top: 15px;
width: 120px;
}
h1:after
{
background-image: -webkit-gradient(linear, left top, right top, from(#777), to(#fff));
background-image: -webkit-linear-gradient(left, #777, #fff);
background-image: -moz-linear-gradient(left, #777, #fff);
background-image: -ms-linear-gradient(left, #777, #fff);
background-image: -o-linear-gradient(left, #777, #fff);
background-image: linear-gradient(left, #777, #fff);
right: 0;
}
h1:before
{
background-image: -webkit-gradient(linear, right top, left top, from(#777), to(#fff));
background-image: -webkit-linear-gradient(right, #777, #fff);
background-image: -moz-linear-gradient(right, #777, #fff);
background-image: -ms-linear-gradient(right, #777, #fff);
background-image: -o-linear-gradient(right, #777, #fff);
background-image: linear-gradient(right, #777, #fff);
left: 0;
}
h1:after2
{
background: #614912;
right: 0;
}
h1:before2
{
background: #614912;
left: 0;
}
/*--------------------*/
fieldset
{
border: 0;
padding: 0;
margin: 0;
}
/*--------------------*/
#inputs input
{
background: #96825a url(http://www.softkey.no/webtest/images/login-sprite.png) no-repeat right;
padding: 15px 15px 15px 30px;
margin: 0 0 10px 0;
width: 353px; /* 353 + 2 + 45 = 400 */
font: bold 20px Arial;
align:center;
color:#ffffff;
border: none ! important;
box-shadow: none ! important;
outline: none ! important;
}
#username
{
background-position: 5px -2px !important;
}
#password
{
background-position: 5px -52px !important;
}
#inputs input:focus
{
background-color: #96825a;
outline: none;
}
/*--------------------*/
#actions
{
margin: 25px 0 0 0;
}
#submit
{
background-color: #e4ab15;
float: left;
height: 55px;
padding: 10px;
width: 100%;
cursor: pointer;
font: bold 30px Arial, Helvetica;
color: #ffffff;
border: none ! important;
box-shadow: none ! important;
outline: none ! important;
}
#submit2
{
background-color: #96825a;
float: left;
height: 35px;
padding: 0;
width: 100%;
cursor: pointer;
font: bold 20px Arial, Helvetica;
color: #ffffff;
border: none ! important;
box-shadow: none ! important;
outline: none ! important;
}
#submit:hover,#submit:focus
{
background-color: #e4ab15;
}
#submit:active
{
outline: none;
}
#submit::-moz-focus-inner
{
border: none;
}
#actions a
{
color: #ffffff;
float: left;
line-height: 35px;
margin-left: 10px;
}
/*--------------------*/
#back
{
display: block;
text-align: center;
position: relative;
top: 60px;
color: #999;
}
</style>
ASKER
Mobile devices display smaller. That is what they are supposed to do. If the user needs it bigger they just zoom. What is the issue? It looks fine to me.
Cd&
Cd&
ASKER
Hi!
The issue is that i want it to be bigger on mobile phone.
Is this not possible ?
The issue is that i want it to be bigger on mobile phone.
Is this not possible ?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
You have some right about this.
This is the line of code i use to fix this:
<meta name="viewport" content="width=device-widt h, initial-scale=1, maximum-scale=1">
This is the line of code i use to fix this:
<meta name="viewport" content="width=device-widt
Post a link to the page so we can see the problem please.
Cd&