Remove white space under the header in Storefront 2.0.3

  • Resolved radumamy

    (@radumamy)


    8 years, 5 months ago

    Hi guys,

    I am looking to remove the white space under the header from this webstite. I am using the latest version of Storefront theme. I have tried multiple suggestions from the net, but without any luck. I have used SiteOrigin Custom CSS to identify the white space (#page.hfeed.site), but I don’t know how to disable it.

    Please advise.

    Thank you.

Viewing 7 replies - 1 through 7 (of 7 total)

  • Hi,

    The whitespace is coming from the bottom margin in this CSS:

    .home.blog .site-header, .home.page:not(.page-template-template-homepage) .site-header, .home.post-type-archive-product .site-header, .no-wc-breadcrumb .site-header {
  margin-bottom: 4.236em;
}

    Try deleting .home.page:not(.page-template-template-homepage) .site-header from that piece of CSS.

    Hope that helps.

    Thread Starter radumamy

    (@radumamy)

    It did. Many thanks. ??

    This also worked for me!

    Hi, I have had some success with this… in as much as if I paste…

    .home #main {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    }

    …into the edit style.css page it removes the white padding from the home page. Was a great big WOOOHOOO when it worked. Thanks!

    However, there was a great big feeling of head in hands despair when I realised it doesn’t remove it from any other pages on the website.

    I have tried deleting .home from the above code to no effect. I have also spent two nights searching Google and forums and Youtube trying many different variations of code and I simply can’t find anything that works.

    Coding (and WordPress) isn’t my forte at all but I usually get by OK reading forums/watching YouTube etc… I’ve tried using Simple Custom CSS plugins, I’ve tried adding code to the appearance>customise>additional CSS and neither of them have worked. I’ve tried front end editing in Visual Composer. I’ve tried making the menu compact with a plugin (that didn’t work) etc. I’ve really tried everything I can find on the Internet.

    Additionally, the only way I can get the above code to work is if I edit the style.css but as I say, I’m stuck with just the homepage fixed but none of the other pages fixed.

    The majority of my pages are either Woocommerce/Storefront product pages and have Default Template page attributes. I did try some other code .home-template-template etc but again, no luck.

    Can anyone please advise?

    I’d happily post the website but it has a coming soon page at the moment.

    Thanks in advance!

    • This reply was modified 7 years, 8 months ago by cclondon.

    I also tried deleting this:

    .home.page:not(.page-template-template-homepage) .site-header

    but to no avail.

    I’m a little out of my depth but a relatively fast learner and determined so if anyone could help me at all would be amazing.

    write in ur child (this was a real pain until a paid programmer solved that for me ??
    .woocommerce-breadcrumb { margin-bottom: 0; }
    .home.blog .site-header, .home.page:not(.page-template-template-homepage) .site-header, .home.post-type-archive-product .site-header { margin-bottom: 0; }

    Dear Motmat – Your code worked like a charm. Thank you for posting this. I tried every other solution mentioned in several and nothing worked till I found your bit of code.
    God Bless ??

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Remove white space under the header in Storefront 2.0.3’ is closed to new replies.