Header image (logo) not aligning properly on home page

[wolfman66]

My latest blog has just gone live. At this stage, I have not yet yet built the widgetized home page. I am simply using a listing of my blog posts on the home page. The theme setting for homepage is untouched and is set to "Your latest posts".

My logo header image is sized to 130 px high, as is supposed to be. The width is shorter but this makes no difference.

On my home page, http://www.doctorretireearly.com, the logo and menu items are top aligned and there is a space above the logo - which there shouldn't be.

If you look at any other page, the logo height fills up the entire site title area and the menu items are aligned in the middle - as is supposed to be.

Somehow, the home page is not right.

I have also tried - on a staging site - to add widgets to the home page so as to start designing the widgetized home page instead of listing posts.

However, the same problem is occurring which indicates that there is a problem, it seems, with the home page template.

Any idea how I can fix this.

https://www.doctorretireearly.com

[wolfman66]

I found a fix for this, but now want to find out whether this could affect SEO.

I found a code snippet to remove the h1 tag on the home page site title. I noticed when using inspector that this block was sitting on top of the logo and creating the space was causing the problem.

//* Removing the H1 tag from home site title
add_filter( 'genesis_pre_get_option_home_h1_on', '__return_true' );

Will the roval of the h1 tag affect SEO in any way. If so, is there any other way to resolve the issue (which is now sorted).

[wolfman66]

Please ignore my reply. The fix causes problems with my caching plugin, which won't cache my posts - so I have reverted.

I hope someone can help me with my issue here.

[Victor Font]

The space at the top is coming from this CSS:

h1, h2, h3, h4, h5, h6 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 20px;
        margin-bottom: 20px;
    padding-top: 30px;
}

Your caching plugin prevents me from seeing where you can find this in style.css, but the space is caused by the padding-top.

If you remove the padding-top from here, you'll remove it from all headings everywhere on your site. So to fix this, add this CSS immediately after the CSS above:

h1.site-title {
    padding-top: 0;
}

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[wolfman66]

Thanks so much Victor.

I had indeed adding the padding because the WP/Gutenberg editor doesn't create enough spacing.

I had overlooked that. Thanks again.

[Author]

Posts