Solved

Resize web page to mobile phones

Posted on 2013-05-23
6
172 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
6 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39191103
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
ID: 39191118
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39191744
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!

 
LVL 2

Author Comment

by:team2005
ID: 39192504
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
ID: 39192544
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
ID: 39201119
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

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!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This article discusses how to create an extensible mechanism for linked drop downs.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

730 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