Log in Get SwiftGrid →
Not resolved

Spacing in Page title on a single page

Ultra Theme started by svepet Jun 25, 2016 4 replies
svepet Jun 25, 2016 · 11:53 pm #3973

Hi,
i don’t know should i ask you but is there a way to change the spacing shown in the page title on the page itself but not anywhere else?

the page in question is http://svepet.hr/index.php/pr-i-events-i-promotion-i-congress/
and i want it to look like this : http://imgur.com/bK2C5OW
so i want to edit just the title on that one page (the spacing and remove that one symbol that is usually setting them apart).. i searched the forums here and on wordpress.org but didn’t find a solution .

I you could help i would appreciate it.

Andrew Misplon Puro Jun 26, 2016 · 2:20 pm #3976

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%;
}
svepet Jun 27, 2016 · 11:50 am #3986

This reply has been marked as private.

Andrew Misplon Puro Jun 27, 2016 · 3:50 pm #3988

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;	
	}

}
5 posts