Solved

Resize web page to mobile phones

Posted on 2013-05-23
6
164 Views
Last Modified: 2013-05-28
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
Comment
Question by:team2005
  • 3
  • 3
6 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
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
 
LVL 2

Author Comment

by:team2005
Comment Utility
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
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
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 
LVL 2

Author Comment

by:team2005
Comment Utility
Hi!

The issue is that i want it to be bigger on mobile phone.
Is this not possible ?
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 500 total points
Comment Utility
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
 
LVL 2

Author Closing Comment

by:team2005
Comment Utility
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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

Deprecated and Headed for the Dustbin By now, you have probably heard that some PHP features, while convenient, can also cause PHP security problems.  This article discusses one of those, called register_globals.  It is a thing you do not want.  …
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

728 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now