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 ?
<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>
Select all Open in new window
Post a link to the page so we can see the problem please.
Cd&