[Resolved] How do I change the line length of my paragraphs?

[Robin]

Hi there – My containers and padding all look fine.

However I need to make the text lines only 600px in length for my posts/pages.

How do I do this please?

Here’s a screenshot of what I mean…

[Robin]

Here’s the screenshot…

[Robin]

I changed the padding under Layout > Container to get the line length correct.

However it messes up my home page showing my blog post excerpts. How do I keep the original formatting on my home page so it doesn’t look bad?

TIA, Robin

[David]

You code use some CSS to only target the single post padding.

.single-post .site-content {
padding-left: 80px;
padding-right: 80px;
}

[Robin]

Thanks for that David. Unfortunately it makes the post one thin column on mobile devices. So hasn’t worked.

[Leo]

Try wrapping that in media query so it’s desktop only: https://docs.generatepress.com/article/responsive-display/

[Robin]

Do you mean like this:

@media (min-width: 1025px) {
.single-post .site-content
padding-left: 80px;
padding-right: 80px;
}

Because inside Customizer I get a “you’re about to break your site” message.

[Leo]

Try this:

@media (min-width:769px) {
    .single-post .site-content {
        padding-left: 80px;
        padding-right: 80px;
    }
}

[Robin]

Many thanks Leo (and everyone else) for your help. That worked.

One last thing. The padding causes the container to resize. Is there a way to keep the original container size, and just have the text sentences/paragraphs change?

I tried this, but no luck:

@media (min-width:1100px) {
.single-post .site-content {
padding-left: 200px;
padding-right: 200px;
}
}

[Leo]

Hmm I’m not sure what you mean.

Changing the padding shouldn’t cause the container size to change.

I currently don’t see any CSS being applied to the page linked?

[Robin]

Yes I’ve removed it because it was messing with my site.

Here’s a before and after screenshots of what happens.

Before: http://www.screencast.com/t/TaGwCQBu

After: http://www.screencast.com/t/Ah8bCZSW

As you’ll see the container shrinks.

This is what I used:

@media (min-width:769px) {
    .single-post .site-content {
        padding-left: 200px;
        padding-right: 200px;
    }
}

Any help?

[Leo]

Try this CSS instead:

@media (min-width:769px) {
    .single.separate-containers .inside-article {
        padding-left: 200px;
        padding-right: 200px;
    }
}

[Robin]

Unfortunately that didn’t do anything. Thanks all the same.

[Leo]

I’m still not seeing any of my CSS being applied.

Make sure to clear caching plugin everytime you make a change, or turn it off during development.

[Robin]

Hi Leo – I removed it from my main site as it would have seriously messed with the look.

I have duplicated the problem here:

https://www.robinharford.com/test-post

TIA, Robin

[Author]

Posts