How to decrease line width?

HTML & CSS
1

Hi, here’s my sales letter: http://howtofocusbetter.com/

As you can see, the headline:

Do you wish you could DO MORE in LESS TIME? Struggling to FOCUS? Want more CONTROL over your life?

basically matches the length of the rest of the paragraphs in the sales letter…

I want to have it shorter, while remaining in the same center position. How can I do this?

2

The <p> that encloses that line just needs a width set (aka 80% or whatever you feel is needed) :). You don’t have a class OR ID on it (you have wayy too many inline styles. Good luck maintaining the site in the future), otherwise I’d just give you a snippet of CSS to add to your stylesheet :).

3

Hi Ryan, I’m not sure I understand what you mean by that. Can you give me an example?

4

You had this

[COLOR=#000000][FONT=Consolas]<p style="text-align: center;"><span style="color: #000000;"><strong><span style="text-decoration: underline;"><span style="font-size: 1.1em;">Do you wish you could DO MORE in LESS TIME? Struggling to FOCUS? Want more CONTROL over your life?</span></span></strong></span></p>

On that first <p>, add in “width:80%;” in your style attribute.

That will allow the width to not be the full length (as what you want, from my understanding) :)[/FONT][/COLOR]

5

NOT that you should be using a span like it was a FONT tag (net improvement zero), inlining all that style or using BOLD to do a heading tag’s job… or saying the color on EVERY element for no good reason.

Also, instead of width you could also just add side padding to narrow it however much you desired.

Being it’s turdpress, the markup is going to be rubbish, but even that can’t be blamed for all those span tags for nothing and the 35k of HTML being used to deliver 15k of plaintext.

For example where you have:


<p style="text-align: center;"><span style="color: #cc0000;"><strong><span style="text-decoration: underline;"><span style="font-size: 1.1em;"><br />
<span style="color: #000000; text-decoration: underline;">Do you wish you could DO MORE in LESS TIME? Struggling to FOCUS? Want more CONTROL over your life?</span></span></span></strong></span></p>

A properly written page would probably read:


<h2>
  Do you wish you could DO MORE in LESS TIME? Struggling to FOCUS? Want more CONTROL over your life?
</h2>

With the style applied in the external stylesheet – something like:

h2 {
  text-align:center;
  padding:0 4em 1em;
}

Whatever wysiwyg you have making that markup for you (since I can’t see it being written by hand like that) is really making your life harder and resulting in a useless page from a semantics, bandwidth and accessibility point of view.