Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 2
ApertureStar

Ishimoto: Can I justify text within Squarespace?

Question

The theme I'm using (Ishimoto) doesn't offer the option to justify text. Is there an HTML or CSS code I can use to justify text within blocks? If so, how do I use it? This would really help me out. This question has been asked before but the wrong answer has been given each time. I am not asking for what works on other sites. I am asking for what works on SquareSpace hosted sites. Kudos for correct answers, not just responses in general.

Edited by TylerF

Share this post


Link to post

22 answers to this question

Recommended Posts

  • 5

ApertureStar, try this code in the CSS editor:


body p, .sqs-layout .sqs-block.html-block p {
 text-align: justify !important;
}


Web and mobile developer.

Share this post


Link to post
  • 3

Just one point from a designers/typography point of view. Justified text is plain awful unless you do it in print when you have full control over each line and it's word spacing. And also being able to overhang punctuation.

Because you get uneven spaces where lines of copy are forced to fit the width.

Basically it makes it uncomfortable to read. Similar to white type on black backgrounds.

My advice from a long career in design and a few typography awards is don't justify your text.


Award Winning Designer ( not a budding one ). Get in touch if you want to invest in something great. Our developer worked with the platform since inception and I have worked for the best advertising agencies in the world. Get in touch and do not use the marketplace. Visit here to see more

Share this post


Link to post
  • 2

Hi there,

The CSS to justify text is:


.element-to-justify {
 text-align: justify;
}

So using custom CSS you can target the element(s) you want to justify. If you post a link to your site and explain which part you want justified, I would be happy to give you the exact code.

Edited by subpar

Web and mobile developer.

Share this post


Link to post
  • 1

There was an erroneous character in the code I posted, which i've now removed. Simply copying and pasting the code won't work for you though, as it is targeting an element that doesn't exist (.element-to-justify). You'll need to let me know which element you want to justify, and i'll give you the exact code to copy and paste. The easiest way to do this is give me a link to your site and explain which part you'd like justified.


Web and mobile developer.

Share this post


Link to post
  • 1

I have to say that although I provided an answer for how to do this, I don't necessarily agree that you should - i'm not a fan of justified text.


Web and mobile developer.

Share this post


Link to post
  • 1

Hi pleasehelp,

That line of text is actually justified as far as the CSS is concerned, so you've done nothing wrong :) CSS won't justify a single line of text, only multiple lines. You can see this in practice if you add some extra text to that block to make it wrap to two lines - see how it now justifies the first line?

Fortunately, there is a way to make CSS think that there is multiple lines, and using the following code should give you the effect you're after:

#d1:after { content: ""; display: inline-block; width: 100%; }


Web and mobile developer.

Share this post


Link to post
  • 0

Hi all - I know this is an old thread but hopefully someone can help :)

Using Montauk, all my body text is under heading 3, and it seems the css I've tried from these boards has only actually worked with normal plain text. Is there something I can use to justify all my header 3 body text across all the pages?

Thanks1

Share this post


Link to post
  • 0

Yes, its modified under h3, I figured out it was overriding the codes - ended up modifying the "normal" and it did work, but it kind of messed up the headers and I had to manually move them over. Not ideal but at least somewhat worked. I could not get justify + center though.

Share this post


Link to post
  • 0

I found this thread a few months back, and the code you posted worked great! HOWEVER, I noticed that the formatting on the footer on some of my pages was messed up, and I couldn't figure out why. I realized that it was only occurring on pages that I had injected this code into. Is there a way to EXCLUDE the justification from being applied to the footer? I'm a relative novice when it comes to code, so if someone could provide the exact modification that I can copy and paste in where needed instead of the original code, I would be GREATLY APPRECIATIVE!

Share this post


Link to post
  • 0

Update: I simply removed .sqs-layout .sqs-block.html-block p as well as !important; It works like a charm, and does exactly what I want it to do. Thank you!

Share this post


Link to post
  • 0

Hi subpar, wondering if you would be able to assist with my site? Seem to be having the same issue in which I'd like certain sections to be justified. Thanks, Gaz

Share this post


Link to post
  • 0
Posted (edited)

Hi @ApertureStar , I made a video tutorial for you on how to Justify Text in Squarespace. Hope this helps! https://www.askquesty.com/post/justify-text-squarespace-tutorial

Edited by AskQuesty
Initial Revision

Have Squarespace questions/task and need help today? **You can hire us here.** Our answers are on-demand, video recorded, and only cost between $5 to $25. Estimates are free, 100% satisfaction guarantee, and trusted by hundreds of small businesses.

Share this post


Link to post
  • 0

Hello, I am facing a similar issue and would appreciate your input. I'm using the "Miller" template with the following CSS to justify all body content. The CSS used to work perfectly across all browsers, but recently, it works only on Chrome and NOT on Safari (i.e., the text is not justified when browsing from Safari for any newly edited text, except when view from Chrome). In other words, some of the text on Safari is still justified, but recently edited text is not:

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

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...