[bperry420Participant]

I have 2 questions regarding the Blog page title:

1. Can you please help me to center my Blog page title?

When you view my blog page on a large screen it is not centered. It’s pushed to the left a little.
However, it is centered when viewed on a mobile screen.

2. How can I add the heading Accent to the Blog page title?

Please see attached screenshot…

http://creativeideasllc.net/blog/
WordPress 4.7.3 running X – Child Theme.
X Version: 4.6.4

[RupokMember]

Hey there,

Thanks for writing in!

#1. You can add this under Custom > CSS in the Customizer.

.blog .x-landmark {
	padding: 0;
}

#2. Let’s add this as well :

.blog .h-landmark span {
	padding-bottom:2px;
	display:inline-block;
	position:relative
}
.blog .h-landmark span::before, .h-custom-headline.accent span::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 9999px;
	display: block;
	margin-top: 0;
	border-top: 1px solid rgba(0,0,0,0.1);
}
.blog .h-landmark span:before {
	right:100%;
	margin-right:0.75em
}
.blog .h-landmark span:after {
	left:100%;
	margin-left:0.75em
}

Let us know how #2 goes.

Cheers!

[bperry420Participant]

Your code for question 1 worked – thanks!

Your code for question 2 did not.
Please see attached screenshot.

[FriechModerator]

Hi There,

#2 Please update the given CSS code to to this:

.x-header-landmark .h-landmark span:after {
	left: 100%;
    margin-left: 0.5em;
}

.x-header-landmark .h-landmark span:before {
	right: 100%;
    margin-right: 0.5em;
}

.x-header-landmark .h-landmark span:before,
.x-header-landmark .h-landmark span:after {
	content: "";
    position: absolute;
    top: 50%;
    height: 2px;
    width: 9999px;
    display: block;
    margin-top: -1px;
    background-color: #e5e5e5;
}

Hope it helps, Cheers!

[bperry420Participant]

We are almost there.

The new code works except the accent lines are extending to the edge of the screen on both sides.

Normal accents have padding on both sides. They stop at some point.

see here: http://creativeideasllc.net/blog/

[JadeModerator]

HI there,

Please update this code:

.x-header-landmark .h-landmark span:before, 
.x-header-landmark .h-landmark span:after {
    content: "";
    position: absolute;
    top: 50%;
    height: 2px;
    width: 9999px;
    display: block;
    margin-top: -1px;
    background-color: #e5e5e5;
}

to

.x-header-landmark .h-landmark span:before, 
.x-header-landmark .h-landmark span:after {
    content: "";
    position: absolute;
    top: 50%;
    height: 2px;
    width: 250%;
    display: block;
    margin-top: -1px;
    background-color: #e5e5e5;
}

Hope this helps.

[bperry420Participant]

That worked! Thanks so much!

[Prasant RaiModerator]

You are most welcome. 🙂

[Author]

Posts