Re: How can I justify the text in my blog posts?

How can I justify the text in my blog posts?

Ben_Neorai_Gate
Explorer
53 1 6

Hey everyone,

 

I'm trying to justify the text in my blog post. I don't know how! Any help, please? 

This is my store:

https://asade.co.il/

This is the blog:

https://asade.co.il/blogs/%D7%94%D7%A4%D7%99%D7%A0%D7%94-%D7%94%D7%99%D7%A8%D7%95%D7%A7%D7%94

 

Thanks a lot guys!

 

Replies 12 (12)

shreyhweb
Shopify Partner
633 111 117

@Ben_Neorai_Gate 

 

i don't understand the requirement. please share me the screenshot. where to justify text on your blog post? 

- If You Find Our Solution Helpful Please Like And Mark As Accepted!
- Sip, savor, and support – your Coffee Tip helps us keep coding.❤️
- If You Want To Further Discussion. Then Contact - info@shreyhsoftsolutions.com

saurav9005
Shopify Partner
99 15 25

Hi,

include this style in your css file.  OR in theme.liquid

<style>

.card__information .article-card__excerpt {

text-align:justify;

}

</style>

please hit Like and Mark as Solution, If this answer solve your problem.  If you find my reply helpful, a small Coffee Tip would make my coding heart soar!
Shay
Shopify Staff (Retired)
3110 472 646

To clarify on @saurav9005  solution, you can actually post your CSS styling directly by using the Theme Editor (for all 2.0 themes). It looks like you are using the Sense theme, which supports this option.

03-56-68677-24763

 

  • To add this CSS style, please open your theme in your admin under Online Store > Themes
  • Customize the theme file
  • Navigate to the Blog template
  • Select Blog Posts from the left hand side
  • Scroll to the custom CSS section in the settings for the section
  • Paste the CSS, but remove the <style> and </style> tags

 

.card__information .article-card__excerpt {

text-align:justify;

}

 

  •  Save changes and review

Shay | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Ben_Neorai_Gate
Explorer
53 1 6

Thanks Shay, yes this works great but only in the blog main page, it's now working on the blog post page, it says:

 

Ben_Neorai_Gate_0-1680562753884.png

 

Ben_Neorai_Gate
Explorer
53 1 6

I'm sorry I had a typo in my previous reply, and I can't edit it, I meant to write that it's not working on the blog post page. It's working only on the blog's main page.

 

I'm adding the screenshot again:

Ben_Neorai_Gate_0-1680562753884.png

 

Shay
Shopify Staff (Retired)
3110 472 646

Hi @Ben_Neorai_Gate 

 

Try this one for the blog page itself:

 

article {
  text-align: justify;
}

 

This will affect the alignment of all the content below the header and navigation. You can edit the blog post content itself in the admin under Online Store > Blogs and justify the text in the content editor there.  

Shay | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Ben_Neorai_Gate
Explorer
53 1 6

Thank you! 😀

Ben_Neorai_Gate
Explorer
53 1 6

Hi again, I thought this issue was solved, but I guess not. I don't know why but somehow the code is not affecting the entire blog post. You can check the screenshots, and please let me know if you have any idea how I can overcome this:

 

Screenshot 2023-04-19 000312.png

 

 

 

 

 

 

 

 

 

 

Screenshot 2023-04-19 000524.png

 

I really appreciate your help! 

Melinda5
Explorer
53 3 11

I tried this and it works, however it also applies it to my title. Is there any css code I can use to make it not apply to the blog title? It makes it look funny. Thanks!! 

 

Screenshot 2023-04-29 at 2.24.45 PM.png

Shay
Shopify Staff (Retired)
3110 472 646

Hi @Ben_Neorai_Gate and @Melinda5 

 

Thank you for the screenshots showcasing the issues you are seeing! If the CSS styling is not working properly, please remove it from your theme and try using HTML styling on the page content instead. I recommend copying and pasting your blog content into a word document before making any changes, to ensure you have an easy recovery of the blog content.

 

You can use this free HTML editor to apply justified styling to the page content specifically: https://html5-editor.net.

 

You can copy and paste the entirety of your blog page into the text editor on the right side of the display, make any changes you want and then copy the HTML version on the left side back into your blog's page editor, replacing the text you had. You can also manually add the styling shown in my screenshot below if you are comfortable. 

 

01-02-6060-37667

 

Adding HTML content to your pages is very easy, you can view your HTML content by clicking the <> button above the text editor for your blogs and pages. 

 

01-06-51000-35931

 

When you activate the HTML editor, you will then see the same content, but in HTML format:

 

01-08-9358-47174

 

Replace the original content with the HTML justified content and save your changes. 

Shay | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Ben_Neorai_Gate
Explorer
53 1 6

Thanks again @Shay , you're super helpful.

I don't know what but still, this seems to work only on some blog posts, and not on all of them.

If you have any clue why - lol - please share with me heh! Otherwise, I guess I will have to deal with that as it is and that's it

Ben_Neorai_Gate
Explorer
53 1 6

I appreciate your help! 🙂