Jump to content

Justifying Text

Recommended Posts

  • Replies 10
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

@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. 

Edited by JOHNMD


Link to comment

@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;}


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


[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;} }


@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. 



Link to comment

@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


Link to comment
  • 1 year later...
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


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

Edited by tuanphan

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.