[Solved] How to shorten paragraph width

[nyfiken]

My problem is that my theme’s (slightly modified Genesis Minimum theme) original fullwidth content paragraph length is too long about for good readability.

I have tried using a two column as solution to the problem, but that will not look good on pages with more text.

I have tried to change the 1140px below to 667px

.wrap {
margin: 0 auto;
width: 1140px;
}

This will create paragraphs of perfect width, but the big disadvantage is that
all other content will shrink to the same size (the site title, menu and images). How can I make the only the text paragraphs less wide?

http://exp.silent.se

[Paulie_D]

all other content will shrink to the same size

Paragraphs are always text…if you are using them to wrap other elements…you’re doing something wrong.

Oh, you might put an floated image occasionally but otherwise a paragraph should be text and nothing more.

Perhaps I’m not seeing what you are getting at though.

[nyfiken]

Thanks for trying. I think you misunderstand me. I am a complete novice in this.

I have no clue at all on how to make only my paragraphs less wide, and nothing else less wide.

Is this a too simple problem, or is it too difficult? Will adjusting the paragraph width cause further problems in the responsive design of the Genesis Minimum theme?

If you check the page below you can see my theme’s original full width content pages’ paragraph width:

http://exp.silent.se/character/

[nyfiken]

Thanks Soronbe,

I appreciate what you said about the unnecessary use of an empty p in the two column solution of my first page! I have corrected that.

I’m sorry but I must ask you about the use of % in

p {
width: 10%;
}

Wouldn’t this cause a problem with the responsive design where everything else in this Genesis theme counts in pixels?

Wouldn’t the best be to match the

.wrap {
margin: 0 auto;
width: 1140px;
}

with a

p {
width: 668px;
}

?

And if so, where in the code below is it to be added?

/* Defaults Genesis Minimum 2.0.1
———————————————————— */

body,
h1,
h2,
h2 a,
h2 a:visited,
h3,
h4,
h5,
h6,
p,
select,
textarea {
color: #3e3e3e;
font-family: ‘Open Sans’, sans-serif;
font-size: 19px;
line-height: 1.5;
margin: 0;
padding: 0;
text-decoration: none;
}

blockquote,
input,
select,
textarea,
.author-box,
.sticky,
.taxonomy-description,
.wp-caption {
background-color: #f5f5f5;
}

input,
select,
textarea {
border: 1px solid #ddd;
}

input,
label,
select,
textarea {
color: #3e3e3e;
font-family: ‘Open Sans’, sans-serif;
font-size: 14px;
}

li,
ol,
ul {
margin: 0;
padding: 0;
}

ol li {
list-style-type: decimal;
}

[nyfiken]

I think we are dealing with two problems at the same time.

My two-column-solution at the first page has been a temporary solution for the too wide full width content of my Genesis Minimum theme. So if I’m able to solve how to to shrink those paragraphs the two column solution problem will be gone. (The problem with the <br /> solution is that the top paragraph of the second column will merge with the bottom paragraph of the first column on small screens. – if there is a simple solution to that I’m glad, but for the moment it isn’t necessary)

I have added

p {
width: 70%;
}

at the bottom of

/* Defaults Genesis Minimum 2.0.1
———————————————————— */

Two problems arise:

1) The paragraphs aren’t centered.

2) It destroys the responsive design = it shrinks the paragraph width on small screens to 70% too.

[nyfiken]

Maybe we are talking about the same thing:

I realize I should have been more specific in my first post: My problem is that on big screens will paragraphs become too wide. There is no problem viewing my pages on an iPhone, but on a stationary computer with a big screen there is a problem with poor readability because of too long lines with to many characters – about 150 characters/line. I want to shrink this to about 60-70 characters/line.

I now realize that this somehow has to do with the responsive design of the theme, but still can not figure out how to solve it.

[nyfiken]

Thanks! Using max-width shortens the paragraphs on big screens and preserves the responsive ones on small ones.

I do, however, still have a problem with centering the paragraphs. The only thing that happens with all the code I try to use from the page you told med, is that the left margin of the paragraph disappears, which of course doesn’t look good.

[janet4now]

I would do:
.entry-content p {
max-width: 700px;
margin: 0 auto 30px;
}

[nyfiken]

Thank you so much!!

That did it!

Thanks all three of you that took the time with this now solved problem that I have been searching the web for many weeks to find a solution to.

[Author]

Posts