White space between Header and Hero image

  • I cannot remove the white space between the header and hero image on my site at framella.com (hosted at WP Engine).

    I previously installed 4 different themes, and created one child theme, installed SiteOrigin’s Page Builder, and have the following active plugins:
    SiteOrigin CSS
    Quotes Collection by Srini G
    Storefront Parallax Hero by WooThemes
    Theme Customisations by Woo Themes
    Title Toggle for Storefront Theme by Wooassist
    WooCommerce by WooThemes

    After trying all of the solutions on this forum, I have managed to reduce the height of the white space, but not eliminate it.

Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter netniks

    (@netniks)

    Revisiting this… I created a new install of WordPress, and continue to get the extra space between the menu and hero image, as seen here at framella.com.

    If Storefront WooCommerce Customizer will allow me to remove the white space, I don’t mind purchasing it.

    I currently added this to the Themes Customisations style.css, but cannot eliminate the white space:

    .site-header {
	padding-top:1em;
	padding-bottom: 0em;
}
.page-template-template-homepage .site-main {
    padding-top: 0em;
}

    Thanks and regards,
    Todd

    Thread Starter netniks

    (@netniks)

    More investigation… the screenshot at this link shows that

    <article id="post-2" class="post-2 page type-page status-public hentry">

    via the Web Inspector in Safari is the culprit for generating the white gap. It has a default margin-bottom of 67.78px. When I set the margin to 0px, the white space goes away.

    Now, why is a post being inserted here, and how do I remove it?

    Thanks and regards,
    Todd

    Thread Starter netniks

    (@netniks)

    For the time being, I added the following CSS to remove the white gap:

    .post-2 {
	margin-bottom:0;
}

    Any thoughts on how to rid the block without the CSS would be appreciated.

    Thanks,
    Todd

    Thread Starter netniks

    (@netniks)

    I installed Storefront Designer and re-ordered the “Storefront Homepage Content” stack to fall below the “Homepage Parallax Hero” stack.

    Thanks,
    Todd

    I am having the same issue at jhulen.com; I can’t get rid of the space between the header and the primary navigation bar no matter what I try.

    @netniks you seem to have found a solution! I am trying to add custom CSS to my storefront theme and it doesn’t seem to want to save. What did you do to correct this?
    Thank you for your time.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘White space between Header and Hero image’ is closed to new replies.

Tags