Imnotanerd Imnotanerd - 5 months ago 8
CSS Question

CSS - Excess space on the right


* {
margin: 0;
border: 0;
padding: 0;
}
html {
-webkit-text-size-adjust: none;
}
body {
background: #474747 url(bg.png);
}
h1 a {
display: block;
text-decoration: none;
font: 40px Helvetica, Arial, Sans-Serif;
letter-spacing: -5px;
text-align: center;
color: #a0a0a0;
text-shadow: 0px 5px 8px #2a2a2a;
}
h2 {
font: 30px Tahoma, Helvetica, Arial, Sans-Serif;
text-align: center;
color: #222;
text-shadow: 0px 2px 3px #555;
}
div#mobile pre {
width: 275px;
margin: 0 auto;
background: #222;
padding: 10px;
font-size: 20px;
color: #555;
text-shadow: 0px 2px 3px #171717;
-webkit-box-shadow: 0px 2px 3px #555;
-webkit-border-radius: 20px;
}


This is what I have so far on an iPhone-optimized version of my site. But when viewed from an iPhone/iPod touch, it looks well, except that there is excess space on the right. How can I fix this?

Answer

I think you have some tabs or spaces after your "labels". You should also have the text in label-elements.

What you might have:

<pre> <form method="post" action="/index.php">Enter a URL<br />(WITH THE http://):               <br /><input type="text" name="url"> 
<br />Want a custom tag?                    <br /><input type="text" name="custom"> 
</form> 
No URL was entered.</pre>

What you should have:

<form method="post" action="/index.php">
  <label for="url">
    Enter a URL (WITH THE http://):
  </label>
  <input type="text" name="url"> 
  <label for="custom">
    Want a custom tag?
  </label>
  <input type="text" name="custom"> 
</form> 
<p>No URL was entered.</p>

Then you need to style it to make it look like before. Remember the pre-element is usually used to output code.