Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
aap_avan

Can I left-justify body text only?

Question

Site URL: https://www.studiobalcaenkwan.com

Hi Squarespace,

I'm looking to justify the body text only of the "Work" portion of this website (linked in this post). I've tried a few CSS codes I found online, and while they did sort-of work, they were unsuccessful because they justified the heading as well as the body text, which looks insane. (I've attached a screenshot to this post so you can clearly understand what I mean by "heading" and "body" -- the heading has a blue rectangle around it, and the body has a green one.) And, because it's probably important: I'm using the "Avenue" template.

Basically what I need is to be able to justify the body, and leave the header left-aligned. If that's not possible, left-justification of the entire thing would also suffice.

P.s. I understand people have strong opinions about text justification, but this is at the request of my employer so you're not gonna change my mind 🙂

Thanks so much for your help!

squarespace screenshot.png

Share this post


Link to post

12 answers to this question

Recommended Posts

  • 0

Because I'm searching for the same, I latch on here.
I want to justify the body text of my whole website and couldn't find the right css (trying a few ones already). 
I´m using the template Rally (Brine Template 7.0).
That would be great! :)
 

Share this post


Link to post
  • 0
7 hours ago, hanna38 said:

Because I'm searching for the same, I latch on here.
I want to justify the body text of my whole website and couldn't find the right css (trying a few ones already). 
I´m using the template Rally (Brine Template 7.0).
That would be great! :)
 

Can you share link to your site? I can take a look


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


Link to post
  • 0
Posted (edited)

Hello, @aap_avan @hanna38  @tuanphan One option is to use a single Code Block and copy and paste the following code: 

<style>
.align {
  text-align: justify;
  text-justify: inter-word;
}
</style>
<h1>EAST VANCOUVER RENOVATION</h1>
<div class="align">
<p>Project Type: Renovation & addition to an existing single-family house</p>
<p>Size: 1,148 sqft (existing), 520 sqft (new)</p>
<p>Location: Vancouver, B.C.</P>
<p>Date of Completion: Fall 2020</P>
<p>Tucked away in a quiet cul-de-sac in East Vancouver, this project involved the renovation and extension of an existing pre-war house for a young family. Needing more room to live, work and play, the Clients wished to maximize their allowable floor area and height with a 520 sq. ft. addition above the existing main living space. A millwork block inserted into a central double height volume incorporates both storage and stairs and provides access to the new upper floor. A skylight and band of window above the double height volume brings natural light into the previously dark centre of the house. The program at the addition includes a master bedroom and ensuite, a home office and access to a roof deck with views towards the city and mountains.</p>
</div>

NOTE Also: The above code should work the same if you use a single Markdown Block.

Secondly: If you want create a left-side indent use the following code: replace the part above with the following code between the style <> to add left-side padding. You can increase or decrease the pixel count (currently set to 20px see below) to get the look you want. 

.align {
  text-align: justify;
  text-justify: inter-word;
  padding-left: 20px;
}

Third: If you want to increase the padding between the title and the text add padding to the top. See below. set at 30px (30 pixels). Adjust accordingly. 

.align {
  text-align: justify;
  text-justify: inter-word;
  padding-left: 20px;
  padding-top: 30px;
}

Lastly If you want to start with bold sub-headers (eg Project Type:) replace the same lines of code above with the following:

<p><b>Project Type:</b> Renovation & addition to an existing single-family house</p>
<p><b>Size:</b> 1,148 sqft (existing), 520 sqft (new)</p>
<p><b>Location:</b> Vancouver, B.C.</P>
<p><b>Date of Completion:</b> Fall 2020</P>

 

- best John

Edited by JOHNMD

mcgouran.john@gmail.com

Share this post


Link to post
  • 0

@JOHNMD

That is working with a markdown. Great!
So there is no CSS I can use to justify the text of the whole webpage, right? (Would be just a little easier to edit in future).
A big THANK YOU for the solution and your great help 🙏😊
hanna

 

Share this post


Link to post
  • 0
42 minutes ago, hanna38 said:

@JOHNMD

That is working with a markdown. Great!
So there is no CSS I can use to justify the text of the whole webpage, right? (Would be just a little easier to edit in future).
A big THANK YOU for the solution and your great help 🙏😊
hanna

 

Yes, @hanna38but you're question needs to be defined better and it may be site specific. You have to be careful here in terms of what you really want to target. For example, in your Design > Custom CSS window you can insert the following code

{
  text-align: justify;
  text-justify: inter-word;
  padding-left: 20px;
  padding-top: 30px;
}

now all paragraphs on your site will be set with the above styling. However, you will still have to decide on the initial placement of the paragraph containers within the page. 

There are several ways to approach the problem. The first answer I wrote above was one simple option that can be replicated page to page by simply cut copy paste and change the wording- not the most efficient, but shows there are options. 

- John 


mcgouran.john@gmail.com

Share this post


Link to post
  • 0

@JOHNMD Thanks for the response! I tried out 'Option 3' you laid out for me, and it half-worked.

Right now I have:

p {
  text-align: justify;
  text-justify: inter-word;
  padding-top: 6px;
}

This definitely targeted the paragraph text as I can see that the padding changes when I modify the code. However, the text itself still isn't justified, and still has a ragged edge. (See attached image). Any ideas?

Thanks again for your help. Really appreciate it.

ragged edge text.png

Share this post


Link to post
  • 0
Posted (edited)

 

1 hour ago, aap_avan said:

@JOHNMD Thanks for the response! I tried out 'Option 3' you laid out for me, and it half-worked.

Right now I have:

p {
  text-align: justify;
  text-justify: inter-word;
  padding-top: 6px;
}

This definitely targeted the paragraph text as I can see that the padding changes when I modify the code. However, the text itself still isn't justified, and still has a ragged edge. (See attached image). Any ideas?

Thanks again for your help. Really appreciate it.

ragged edge text.png

Hi, @aap_avanI see you've changed the header above and the current text live online looks justified, not as above, but still aligned to the header. Okay, the suggestion as first laid out is to use the entire code, including words and title to be added to a single page first. 

Select 'edit', open a teardrop below your current paragraph block end. Select </> Code  option. When the code option is open delete the <p>Hello, World!</p> line. Copy and paste the entire code below. Hit save. 

<style>
.align {
  text-align: justify;
  text-justify: inter-word;
  padding-left: 20px;
  padding-top: 6px;
}
</style>
<h2>EAST VANCOUVER RENOVATION</h2>
<div class="align">
 <p><b>Project Type:</b> Renovation & addition to an existing single-family house</p>
<p><b>Size:</b> 1,148 sqft (existing), 520 sqft (new)</p>
<p><b>Location:</b> Vancouver, B.C.</P>
<p><b>Date of Completion:</b> Fall 2020</P>
<p>Tucked away in a quiet cul-de-sac in East Vancouver, this project involved the renovation and extension of an existing pre-war house for a young family. Needing more room to live, work and play, the Clients wished to maximize their allowable floor area and height with a 520 sq. ft. addition above the existing main living space. A millwork block inserted into a central double height volume incorporates both storage and stairs and provides access to the new upper floor. A skylight and band of window above the double height volume brings natural light into the previously dark centre of the house. The program at the addition includes a master bedroom and ensuite, a home office and access to a roof deck with views towards the city and mountains.</p>
</div>

Note: I capitalized your first letters, so I know you didn't use the entire code (wink.) If you are happy then delete your original text blocks. You can use the same layout on new code blocks for each page. It's one option. 

Regarding the code:

p {
  text-align: justify;
  text-justify: inter-word;
  padding-top: 6px;
}

I'm not clear where you input this code as @hanna38 broadened you initial question. Option 3 above is:

.align {
  text-align: justify;
  text-justify: inter-word;
  padding-left: 20px;
  padding-top: 30px;
}

You must have a specific class of code to target which I provided in the full code - inclusive of your original text. So, you can delete the p {..... code from your CSS editor. Remember to hit save. 

The full code in this reply works on my systems, but in an on-page code block and not in the CSS editor. Hopefully, you can get it working your side. 

Thank you. - John 

Edited by JOHNMD

mcgouran.john@gmail.com

Share this post


Link to post
  • 0
42 minutes ago, JOHNMD said:

 

Hi, I see you've changed the header and the current text live looks justified, not as above, but still aligned to the header. Okay, the suggestion as above is to use the entire code, including words and title. This is for a single page first.  Select 'edit', open a teardrop below your current paragraph block end. Select </> Code  option. When the code option is open delete the <p>Hello, World!</p> line. Copy and paste the entire code below. Hit save. 

<style>
align {
  text-align: justify;
  text-justify: inter-word;
  padding-left: 20px;                                                                                                                                                                     padding-top: 6px;
}
</style>
<h2>EAST VANCOUVER RENOVATION</h2>
<div class="align">
<p>Project Type: Renovation & addition to an existing single-family house</p>
<p>Size: 1,148 sqft (existing), 520 sqft (new)</p>
<p>Location: Vancouver, B.C.</P>
<p>Date of Completion: Fall 2020</P>
<p>Tucked away in a quiet cul-de-sac in East Vancouver, this project involved the renovation and extension of an existing pre-war house for a young family. Needing more room to live, work and play, the Clients wished to maximize their allowable floor area and height with a 520 sq. ft. addition above the existing main living space. A millwork block inserted into a central double height volume incorporates both storage and stairs and provides access to the new upper floor. A skylight and band of window above the double height volume brings natural light into the previously dark centre of the house. The program at the addition includes a master bedroom and ensuite, a home office and access to a roof deck with views towards the city and mountains.</p>
</div>

@JOHNMD Thanks again for your help here.

Forgive me if this is a stupid question (I'm relatively new to Squarespace), but am I able to do this if the text is in a "gallery" format? I currently have it so the text is part of the gallery's description. 

text.png

Share this post


Link to post
  • 0
Posted (edited)

Great question. @aap_avan No, not this solution. This solution assumes you are using a separate image block for your photo (set to inline or stack,) and you are using a separate text block. The text block would now be replaced with a code block.  To align your photo you would need to add a spacer to position. 

Gallery Blocks are different. What version of squarespace are you using? 

Edited by JOHNMD

mcgouran.john@gmail.com

Share this post


Link to post
  • 0

For now, my suggestion is to Duplicate your page. On the Duplicate Page, first toggle the 'enable page' to the off position. Then re-build the top section of your page using a single image block for your photo and a text block (or now code block) for your wording. As an Example see image below. Important to note: the code block above will inherit your Fonts, Font Colors and Font Sizes. The example below is just for quick reference. You can remove the Bolding from the text styling if you wish. 

Targeting the Galley Block is different and widens the scope.

you could try one of the following codes in your css editor:

.project-description > p {
padding-left: 10px;
} 

or

.project-description > p {
margin-inline-start: 10px !important;
} 

or

.project-description {
margin-inline-start: 10px !important;
} 

See if one works? 

4403e291-2f03-4634-a4db-a40fa6da784e 

 


mcgouran.john@gmail.com

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