Center The Blog Title

Support
#1

I previously posted a question on how to center the title of the main blog in the header. The response I received did not work. Also I did not see a way to answer the post sent to me or how to continue the thread.

We are simply trying to center the Main Blog Title. Currently it states “Mustard Seed Blog”. It is left justified. We wish to center it. I AM NOT talking about the title of individual blog posts. I am referring to the Main Title of our blog page as specified in the Theme Option >> Renew. Strange place to put the Blog title but okay? Why not place in the blog section. Anyway. The code offered to us to put in the CSS for options did not work. The code recommended to me which did not work was.
.blog .x-landmark {
text-align: center;
}

Can you please offer the code for the main title for the blog as shown on our site at https://mustardseedtinyhomes.com/mustard-seed-blog/. The title is “Mustard Seed Blog” and is currently left justified. Please dont send me another 1 1/2 hour video.I just need the correct class/style for this element.

#2

Hello David,

Thanks for writing in!

Please add following CSS under X > Theme Options > CSS:

.blog .h-landmark span {
    text-align: center;
    display: block;
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

#3

that seems to work. However, it is not centered in appearance. It is moved left of center ??

#4

Although it is a bit left of center, it seems to work on main blog page. but not on individual blog post pages.

Examples:
Works:
https://mustardseedtinyhomes.com/mustard-seed-blog/
Doesn’t work:
https://mustardseedtinyhomes.com/2019/05/23/the-zion-mustard-seed-edition/

#5

Hi David,

The above provided code is only for the blog index page. To target your single blog posts, try adding the following CSS rule as well.

.single-post .h-landmark span {
    text-align: center;
    display: block;
}

Also to fix the aligning issue, try adding the following CSS rules.

.blog .x-landmark {
    padding-right: 0;
}
.single-post .x-landmark {
    padding-right: 0;
}

Hope that helps.

#6

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.