How to justify paragraph text right and left

Site URL: https://grey-oboe-73ll.squarespace.com/

Hi @tuanphan

I try to justify the text in the green square.

I tried the css : text-align: justify;

But it done nothing.

Thanks for your help !

https://grey-oboe-73ll.squarespace.com/

Password : Laflaneuse

I believe you have to target the summary block but so far I have found no tutorial on how to do this for a summary block. Will keep looking, would like to do this myself for my site to see how it looks. 

@derricksrandomviews HI !

Thanks for your help !

Yes, it would be great !

What do you need to access the site ?

@tuanphan Would you have any solution for this ?

Thanks a lot,

Lucie

No solutions yet. 

Hi,

add border + Make boxes same height

or

justify text in 4 boxes?

Hi @tuanphan

In resume, I would like to justify the text in all the website.

Are there any codes for that ?

It seems so simple but I can't find a solution.

Thanks for your help.

The css property you're using is correct. the issue will be how you target the paragraphs you want to justify. if squarespace already has a text-align code put in for that piece of content (from a more specific rule) your css code won't apply without !important being added.

I'd question whether you want this effect for the whole site, many of the section blocks in summaries etc are way too small for this effect to be a good decision.

Anyway, if you want to do it for the whole site something like this added to your custom css will do it

p { text-align: justify !important }

I'd probably suggest that you try to target certain items more specifically. 

Hello i am having an extremely tough and confused time with this whole justify thing, and my client really wants it.

Im interested in how to set it to globally be justified for body text.

But she is only most interested in justifying the text on the About page.

https://harmonica-denim-49s7.squarespace.com/

password: gelis

Thank you!

@libertine

OK, you just need to find a way to target only the about page. One way to do this is to find the section id and use that in a CSS rule that you paste into your Custom CSS. The easiest way to find the section id is using the Squarespace ID Finder chrome extension.

For your about section the id is "60e3ad8978955f711e766495", so all you need to do is take the code from above and prefix it with a rule to target only this id. it looks like this

// justifies paragraphs in the "about" section
section[data-section-id="60e3ad8978955f711e766495"] p { 
	text-align:justify; 
}

add this to your custom CSS (in the main design menu). because this is a more specific rule than Squarespace's global text align rule you don't need !important here as I posted in my answer above.

As a footnote I would add that I don't think justifying text is a very "web" thing to do. it tends to be something you do to reinforce the idea/shape of columns of text. that said, I understand it's a client choice.

On 10/8/2021 at 4:45 AM, iamdavehart said:

@libertine

OK, you just need to find a way to target only the about page. One way to do this is to find the section id and use that in a CSS rule that you paste into your Custom CSS. The easiest way to find the section id is using the Squarespace ID Finder chrome extension.

For your about section the id is "60e3ad8978955f711e766495", so all you need to do is take the code from above and prefix it with a rule to target only this id. it looks like this

// justifies paragraphs in the "about" section
section[data-section-id="60e3ad8978955f711e766495"] p { 
	text-align:justify; 
}

add this to your custom CSS (in the main design menu). because this is a more specific rule than Squarespace's global text align rule you don't need !important here as I posted in my answer above.

As a footnote I would add that I don't think justifying text is a very "web" thing to do. it tends to be something you do to reinforce the idea/shape of columns of text. that said, I understand it's a client choice.

Hello thank you very much for your help.

I entered this in but no effect.  Any thoughts?

On 11/3/2021 at 11:05 PM, libertine said:

Hello thank you very much for your help.

I entered this in but no effect.  Any thoughts?

Do you still need help?

Yes, Tuan still need help  🤪

On 10/8/2021 at 7:16 AM, libertine said:

Hello i am having an extremely tough and confused time with this whole justify thing, and my client really wants it.

Im interested in how to set it to globally be justified for body text.

But she is only most interested in justifying the text on the About page.

https://harmonica-denim-49s7.squarespace.com/

password: gelis

Thank you!

It looks already justify here

On 10/8/2021 at 9:45 PM, iamdavehart said:

@libertine

OK, you just need to find a way to target only the about page. One way to do this is to find the section id and use that in a CSS rule that you paste into your Custom CSS. The easiest way to find the section id is using the Squarespace ID Finder chrome extension.

For your about section the id is "60e3ad8978955f711e766495", so all you need to do is take the code from above and prefix it with a rule to target only this id. it looks like this

// justifies paragraphs in the "about" section
section[data-section-id="60e3ad8978955f711e766495"] p { 
	text-align:justify; 
}

add this to your custom CSS (in the main design menu). because this is a more specific rule than Squarespace's global text align rule you don't need !important here as I posted in my answer above.

As a footnote I would add that I don't think justifying text is a very "web" thing to do. it tends to be something you do to reinforce the idea/shape of columns of text. that said, I understand it's a client choice.

Thank you for this!