Justifying Text

Site URL: https://potato-sphere-g3k8.squarespace.com/config/

hi! How do I justify text in our paragraphs on our whole site? @tuanphan

Website: naonow.com Password: naonow 

https://naonow.com/tutors

I'd particularly like to justify font on our "tutor" page if possible!!

@rachelt In your Design> CSS add

p {
  text-align: justify;
  text-justify: inter-word;
}

- John

Thank you so much!! Is there a code to get the text justified on mobile mode also?  @JOHNMD

@rachelt Try this in Design> CSS

@media only screen and (max-width: 640px)  { p { text-align: justify!important;
  text-justify: inter-word!important;} }

- John

For your image question: usually what I do is open up the image editor for each image, select the crop tool and set all photos to the same aspect ratio eg 1:1 for square. 

Like this? Not sure if it worked! 😞

@JOHNMD Also, do you know how to make the text NOT justified for these pictures and for the hover text to be shorter not full image on mobile mode only? Thanks!!

@racheltI'm  unclear how you input your titles above. You appear to have different font sizes; some maybe h2 h3 and so on, or you may be using image-captions. Usually the best approach is to locate your Page Section ID and you can replace the "number" in the following code line:

 [data-section-id="5ea91572b3afb8186001cf71"] .image-caption{ text-align: left!important;}

or:

 [data-section-id="5ea91572b3afb8186001cf71"]  p { text-align: left!important;}

or:

[data-section-id="5ea91572b3afb8186001cf71"]  h2, h3 { text-align: left!important;}

- hope this helps

 On earlier revert to:

@media only screen and (max-width: 640px)  { p { text-align: justify!important;} }

or,

@media only screen and (max-width: 640px)  { p { text-align:left!important;} }

There are several options for Justify text. I find for short sentences align-left looks best. 

https://www.w3schools.com/cssref/css3_pr_text-justify.asp

9 hours ago, rachelt said:

 

@JOHNMD thank you!!! mobile still won't justify :((

@rachelt Hey, typically, if you set the first line below, then all your paragraphs (p) should hold over to the Mobile settings, that is unless you have created css for specific targeted divs.  You should only require one line of code - the first line below. The second line of code below is a Media Query specific to Mobile. You'll note that I set that line to"text-align: right" to see where this leads you. If you input both lines (three total below) then you should see a difference and know the code is effective. You can reset to using the first line. 

p { text-align: justify;
 }
@media only screen and (max-width: 640px)  { p { text-align: right!important;} }

- John

JOHNMD: the code does not work for me. Can you tell me why?

My url is https://bullfrog-collie-jwf9.squarespace.com/config/design/custom-css

On 6/29/2021 at 5:25 AM, Chrystele said:

JOHNMD: the code does not work for me. Can you tell me why?

My url is https://bullfrog-collie-jwf9.squarespace.com/config/design/custom-css

p2 tag doesn't exist. It is

Quote

p:not(.sqsrte-large):not(.sqsrte-small) {}

If it doesn't work. Which text you want to align? Can you share link? /config is admin url