Limit the length of the body text

Support
#1

Hi,

The length of my body text is around 150 characters per line including spaces, whereas the optimal length of the body text for readability is considered to be within the range of 50-75 characters per line, including spaces.

Any suggestions on a way to limit the length of my body text within the range of 50-75 characters per line, while keeping the width of the rest of the elements (images, videos, lines etc)?

Example:
http://wwwlol.asbjornflo.net/two-columns-2/dobbeltgjenger/

#2

Hi Osbourne,

Thank you for writing in, on the Text element, there is the max-width option, please set that around 500px - 600px and set the left and right margin to auto so it will be center.

Hope it helps,
Cheers!

#3

Hi,

Thanks a lot. I tested it, and this works, but almost all of my pages are not written in Cornerstone, but with word press. This is for various reasons, one of them being compatibility with older and future content as well as ease of use for other users. I am using the Renew Stack.

Any suggestions on how to achieve the same without using Cornerstone?

#4

Hello

Thanks for updating the thread. :slight_smile:

Please try out following CSS under X > Theme Options > CSS:

.entry-content p {
    max-width: 600px;
    margin: 0 auto;
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

#5

Thanks a lot Prasant,

The «max-width: 600px;» works fine, but the «margin: 0 auto;» removes the space between each block. Is there any way to center the text without loosing the space between each block?

I also updated X today, and the «max-width» option on the Text element in Cornerstone, as well as the entire «setup» part seems to be gone.

Is this functionality removed from the new X/Cornerstone?

(BTW: In the section under layout «row» and «column» are changed to «classic row (v2)» and «classic column (v2)».)

#6

Hello Osbourne,

Please do not use margin: 0 auto; because you will loose the bottom margin.
Use this instead:

.entry-content p {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

If you are not seeing the margins and padding in your Cornerstone, the advanced mode might have been turned OFF. Please go to X > Settings > Permissions > User Preferences > Advanced Mode and set it to “Alway ON”.

We would love to know if this has worked for you. Thank you.

#7

Thanks a lot RueNel, This works great!

On this page:
http://wwwlol.asbjornflo.net/two-columns-2/dobbeltgjenger/
Is there a way to keep the small text, the one that begins with «Lydinstallasjon. Metallobjekter […]», aligned in the middle like it is, while at the same time align the same small text at the bottom half of the page ((The three block that begins with «Lydmiks og videoredigering:», «Foto:» and «Foto:»)) to the left?

Also; is there a way to allign the custom html for Soundcloud to the middle with a max-width of 600px in the same way as the entry-content, while keeping the custom html for Vimeo full width?

BTW1:
I also moved the h3 and h4 headers in the same way as the entry-content, to allign them with the text:
h3, h4{
max-width: 600px;
margin-left: auto;
margin-right: auto;
}

BTW 2:
after setting «Advanced Mode» to “Alway ON” in «User Preferences» as you suggested, everything seems to work as it did before I updated X, it seems like the update did some kind of reset, because I never turned this on in the first place as far as I can remember.

#8

Hi Osbourne,

To align the following text on the left, you need to add a custom CSS on it like this:

<p class="has-small-font-size wide">Lydmiks og videoredigering: Asbjørn Blokkum Flø<br>Lydopptak: Jonas Skarmark og Asbjørn Blokkum Flø<br>Videofotografi: Karoline Finnema</p>

Then update this custom CSS:

.entry-content p{
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

To this:

.entry-content p:not(.wide) {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

Try this custom CSS:

.page-id-558 iframe {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    display: block;

}

You might need to be specific on your CSS like the following so it won’t affect all h3 and h4 sitewide:

.page-id-558 h3, .page-id-558 h4{
max-width: 600px;
margin-left: auto;
margin-right: auto;
}

Hope this helps.

#9

Thanks a lot Lely,

«(.wide)» works perfectly!

The last part for the Soundcloud html:
.page-id-558 iframe {
max-width: 600px;
margin-left: auto;
margin-right: auto;
display: block;
}
messes up the Vimeo part (my initial idea was to keep the Vimeo html full width), changes line distance between the sound cloud instances, as well as changing or removing «line» blocks. You can see this here:
http://wwwlol.asbjornflo.net/two-columns-2/dobbeltgjenger/

Are there any ways to fix this?

#10

Hi Osbourne,

Can you also add a wide class on your VIMEO video iframe? Then adjust the CSS to this:

.page-id-558 iframe:not(.wide)  {
max-width: 600px;
margin-left: auto;
margin-right: auto;
display: block;
}

Hope this helps.

#11

Thanks Lely,

That worked! The vertical line distance between Soundcloud instances is still too small after implementing this. it now looks like this:

But it used to look like this:

Are there any ways to fix this?

#12

Hello Osbourne,

Thanks for updating the thread. :slight_smile:

Please replace previous code with following and let us know how it goes:

.page-id-558 iframe:not(.wide) {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin-bottom: 20px;
}

Thanks.

#13

Thanks, this works perfectly! Really appreciate your help.

#14

We are delighted to assist you with this.

Cheers!

#15

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.