Hi everyone,

Here is the site I'm working on:

bloodlinehandmade.com

Currently the site looks like garbage on an iPhone or other mobile device and I'm trying to make it so that it 'auto-formats' itself based on the screen size.

Things I know I'm currently having trouble with:

the width of the nav bar constantly needing to be different. It's currently set to 71%.

The size of the mission statement. It elongates on a smaller screen instead of remaining horizontally rectangular.

Essentially, the way that it looks on a computer is the way I want it to appear on a mobile device, proportionally.

CSS:
Code:
* { padding: 0; margin: 0; }

body {
background-color: #fff;
background-repeat: repeat-x;
}


#page {
margin-top: 20px;
margin-right: auto;
margin-left: auto;
width: 98%;
background-image: url(images/suit.png);
padding-top: 625px;
border: 5px solid;
border-color: #818181;
box-shadow: 0px 3px 10px #888888;
}

#presspage {
margin-top: 20px;
margin-right: auto;
margin-left: auto;
width: 98%;
background-image: url(images/underconstruction.png);
padding-top: 625px;
border: 5px solid;
border-color: #818181;
box-shadow: 0px 3px 10px #888888;
}

#eventpage {
margin-top: 20px;
margin-right: auto;
margin-left: auto;
width: 98%;
background-image: url(images/underconstruction.png);
padding-top: 625px;
border: 5px solid;
border-color: #818181;
box-shadow: 0px 3px 10px #888888;
}

#testimonialpage {
margin-top: 20px;
margin-right: auto;
margin-left: auto;
width: 98%;
background-image: url(images/underconstruction.png);
padding-top: 625px;
border: 5px solid;
border-color: #818181;
box-shadow: 0px 3px 10px #888888;
}

#infoapptpage {
margin-top: 20px;
margin-right: auto;
margin-left: auto;
width: 98%;
background-image: url(images/suit.png);
padding-top: 150px;
border: 5px solid;
border-color: #818181;
box-shadow: 0px 3px 10px #888888;
}

#mission {
font-family: "Times New Roman, Times, serif";
top: 400px;
background-image: url(images/missionbg.png);
position: fixed;
padding-left: 10px;
padding-right: 10px;
margin-left: 100px;
margin-right: 625px;
color: #fff;
font-style: italic;
}

#logo {
top: 20px;
left: 10px;
z-index:9997;
position: absolute;
}

#navshadow {
width: 70.75%;
background:rgb(61,61,61);
text-align: left;
position: absolute;
z-index: 9996;
top: 23px;
float: left;
left: 360px;
padding-bottom: 25px;
filter: alpha(opacity=50);
filter: progid:DXImageTransform.MIcrosoft.Alpha(opacity=50);
opacity: 0.5;
-moz-opacity: 0.50;
}

#nav a:hover{
color: #f1e4b0;
transition: color 0.2s linear 0s;
}

#nav {
font-family: "Helvetica";
width: 71%;
background:#818181;
text-align: left;
position: absolute;
z-index: 9998;
top: 20px;
padding-top: 10px;
float: left;
left: 360px;
text-shadow: 2px 2px 10px rgb(61,61,61);
}

#nav ul {
list-style: none;
}

#nav li {
float: left;
padding-left: 50px;
padding-bottom: 10px;
text-align: left;
}

#nav a:link{
text-decoration: none;
}

#nav ul li a {
text-transform: uppercase;
color: #fff;
font-size: 16px;
margin: 0 0.15em;
}

#form {
background: url(images/formbg.png);
margin: auto;
bottom: 50px;
position: relative;
width: 474px;
height: 500px;
font-family: Tahonma, Geneva, sans-serif;
font-size: 14px;
line-height: 24px;
font-weight: bold;
color: #fff;
text-decoration: none;
}

input {
margin-left: 50px;
padding-left: 22.5px;
width: 375px;
}

textarea {
display: block;
margin-left: 50px;
}

select {
margin-left: 50px;
}
Thank you very much for any and all help guys/girls(: