Spacing in Page title on a single page

Hi svepet

If you remove the characters you’ve used between each word then you can add the following to your Custom CSS plugin:

/* Page Titles */
.page .site-content > .entry-header h1.entry-title {
    text-align: justify;
    text-align-last: justify;
    width: 100%;
}

Here is what it would look like to only target this page:

/* Page Titles */ 
.page-id-3949.page .site-content > .entry-header h1.entry-title { 
	text-align: justify; 
	text-align-last: justify; 
	width: 100%; 
}

There isn’t really any easy to align page title words with content below, it’ll get complex. You’d need to give each word a span tag and then try target each tag with spacing and then drop that spacing as you get to mobile…are you certain this feature is required 🙂

You might add spans around each word in the title like this:

<span>PR</span>
<span>Events</span>
<span>Promotion</span>
<span>Congress</span>

And then manually set each margin as follows:

@media (min-width: 1024px) {

	.page-id-3949 .entry-title span {
		display: inline-block;
	}

	.page-id-3949 .entry-title span:nth-of-type(1) {
		margin-right: 20px;	
	}
	.page-id-3949 .entry-title span:nth-of-type(2) {
		margin-right: 20px;	
	}
	.page-id-3949 .entry-title span:nth-of-type(3) {
		margin-right: 20px;	
	}
	.page-id-3949 .entry-title span:nth-of-type(4) {
		margin-right: 0;	
	}

}