Change Content Width

Resolved joshtaroli
(@joshtaroli)

8 years, 7 months ago

Hello :),

I am trying to change the width of the content window on my pages. Preferably, I’d like to make the text narrower and leave the images as they are. If that’s not possible for logic reasons, aligning the text with the image (see link) would be great. After looking a bit around, I noticed that it’s theme specific. Could someone help me out and let me know what I need to change in the Kale theme?

Best,

Josh

The page I need help with: [log in to see the link]

Viewing 9 replies - 1 through 9 (of 9 total)

Rico Mossesgeld
(@ricotheque)

8 years, 7 months ago
Hi @joshtaroli, @ricotheque from LyraThemes here.

You can reduce the width of your text by adding this to Appearance > Customize > Additional CSS in your Dashboard:
```
.single .entry-content p {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}
```
Just change “800px” to your desired width in pixels (like “600px” or even “450.5px”).

On a related note, you can also make the text larger through the Custom Typography feature of Kale Pro.

Hope this helps!
Thread Starter joshtaroli
(@joshtaroli)

8 years, 7 months ago

Hi @ricotheque,

Many thanks, that did it :)!

Cheers!

Thread Starter joshtaroli
(@joshtaroli)

8 years, 7 months ago

Well, I said, that it solved the issue. Unfortunately, it does not.

I am looking at this post:
http://joshtaroli.com/marrakech-city?preview_id=1687&preview_nonce=7e95e8c80a&_thumbnail_id=-1&preview=true

Changing the px doesn’t affect it in the slightest.

Any ideas?

Thread Starter joshtaroli
(@joshtaroli)

8 years, 7 months ago

Might this be due to the latest update?

Rico Mossesgeld
(@ricotheque)

8 years, 7 months ago

Hi @joshtaroli, you’re right. The code no longer works because of an update. Just replace .single-post .entry-content p with .single-content instead. 🙂

Thread Starter joshtaroli
(@joshtaroli)

8 years, 7 months ago

Thanks @ricotheque, it’s working :)!

barbaravdewinter
(@barbaravdewinter)

8 years, 6 months ago

Hello!
I’m having the same issue. My blog post is very flat and would like a smaller width so the text becomes more readable.
I added the additional CSS, but nothing has changed.
This is what I added:
.single-content p {
max-width: 450px;
margin-left: auto;
margin-right: auto;
}

Is there anything else I need to do?
Theme Author lyrathemes
(@lyrathemes)

8 years, 6 months ago
Try this @barbaradewinter:
```
.single-content {
    max-width: 450px;
    margin: 0 auto;
}
```
barbaravdewinter
(@barbaravdewinter)

8 years, 6 months ago

Thanks for the help! The original code helped after updating the theme. Thanks anyway!