• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 180
  • Last Modified:

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 ?

<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>

Open in new window

0
team2005
Asked:
team2005
  • 3
  • 3
1 Solution
 
COBOLdinosaurCommented:
Posting just some CSS does not tell us anything about the structure of the page except that the design is rigid using fix dimension, absolute positioning, and even a font size defined in pixels.

Post a link to the page so we can see the problem please.

Cd&
0
 
team2005Author Commented:
0
 
COBOLdinosaurCommented:
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&
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
team2005Author Commented:
Hi!

The issue is that i want it to be bigger on mobile phone.
Is this not possible ?
0
 
COBOLdinosaurCommented:
It is already oversized, but if you want to make it bigger you can use media queries and re-size to bigger stuff:

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

Cd&
0
 
team2005Author Commented:
You have some right about this.
This is the line of code i use to fix this:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now