Excess space on the right

Question

 * { 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?

Hard to tell. Could it be that the bg.png is too small for the device width? — Jason Gennaro
– Jason Gennaro, Commented May 24, 2011 at 1:55
Can you supply a live link or put up an example on jsfiddle.net — Dan
– Dan, Commented May 24, 2011 at 5:01
switch.tk <- view it on a Desktop and then on an iPhone/iPOd Touch. And no, the bg.png is a perfect size as it fit perfectly before I added the pre {}. — Imnotanerd
– Imnotanerd, Commented May 26, 2011 at 0:40
Adding non-answers to "bump" your question isn't acceptable behavior here. If you want to draw attention to your question, you will be allowed to place a bounty on it after two days. You can also edit your question to add additional information, which may make your question easier to understand and answer. — user1228
– user1228, Commented May 27, 2011 at 17:52

martnu · Accepted Answer · 2011-05-27 21:37:49Z

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.

Collectives™ on Stack Overflow

Excess space on the right

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related