Jump to content

Can I left-justify body text only?

Recommended Posts

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

Link to comment
  • Replies 12
  • Created
  • Last Reply

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! :)
 

Link to comment
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

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

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

mcgouran.john@gmail.com

Link to comment
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

Link to comment

@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

Link to comment

 

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 

mcgouran.john@gmail.com

Link to comment
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

Link to comment

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? 

mcgouran.john@gmail.com

Link to comment

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

Link to comment

Archived

This topic is now archived and is closed to further replies.

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