This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Get rid of margin between header and first page builder row

Resolved 13 replies pluginplugin-page-builderpremium
Valentin Zambelli
11 years ago · Last reply by Andrew Misplon 9 years ago

Hey!

I am having trouble with the page builder /vantage theme.
Our website is www.taskwunder.com
As you can see, there is about a centimeter of space between the menu and the picture. I am not using a slider, because I wanted to insert the search widget. I don’t need the slider functionality (switching between pictures). With the free meta slider, however, it would work. It lines up directly under the menu.

I have tried various custom css, including

.panel-grid-cell {
margin-top: 0px !important;
}

but I cannot get it to work. any help?

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

13
  1. kendall 11 years, 6 months ago

    #main has a generic padding of 35px. Overriding it in a child theme or custom CSS field with

    #main {
padding-top: 0;
}

    should solve your issue. See the screenshot at http://i.imgur.com/lIUpF8u.png for an example.

    Cheers.

  2. Andrew Misplon Staff 11 years, 6 months ago

    Hi Valentin

    Give Kendall’s snippet a try – just insert it under Appearance > Custom CSS and it should do the trick.

    Thanks again Kendall.

  3. Valentin Zambelli 11 years, 6 months ago

    Hey Kendall,

    thank you for your reply. When I change the padding through “inspect element” (like on the screenshot) it does work. However, the Custom CSS seems to get ignored.
    I tried both

    #main {
padding: 0px;
}

    and

    #main {
padding-top: 0px;
}

    but nothing seems to work. For testing purposes I tried this simple piece of code:

    h1{
  color:red;
}

    Doens’t work either! So I assume something is causing the Custom CSS to get overlooked.

  4. Valentin Zambelli 11 years, 6 months ago

    I changed the code in the Vantage Theme CSS directly and it works now. However, (aside from this being not update proof) now I have another problem: Other pages without a picture at the top look squished now.
    http://www.taskwunder.com/blog/

    Is there a way to change only the static homepage’s css?

  5. kendall 11 years, 6 months ago

    Valentin,

    Are you familiar with the process of creating a custom page template? If so, then make a new page template with a new div with a new class name such as or something similar and nest the #main css under the new class in the stylesheet.

    If you’re not familiar with making a custom page template, it’s actually quite simple, though understandably a little bit intimidating if you’ve never done so before. Basically you just copy an existing page template to a new file name, change the code you want to change and add a little bit of metadata at the top of the new file. The whole thing is actually quite well documented here:

    http://codex.wordpress.org/Page_Templates

    Anyway, to simplify matters even more, I’ve gone ahead and just made a child theme with the new page template and the necessary CSS rule. This should give you a very detailed blueprint to follow for both making child themes (important if you want to receive theme updates without breaking things) and making page templates.

    http://peppermint.ws/resources/vantage-child.zip

    I hope this works for you. Cheers.

  6. Andrew Misplon Staff 11 years, 6 months ago

    Give this a go:

    .home #main { padding-top: 0 !important; }
  7. Jonas Holm 11 years, 5 months ago

    Hey Guys. Thanks for an awesome theme!! (-:
    I need the same as Valentin, so I inserted the code (tried both). When I insert the code it gives me a grey line between my menu and my pictures on my frontpage. See http://www.regenclinic.dk/ – what is it I’m doing wrong? (-:

  8. Jonas Holm 11 years, 5 months ago

    I just found out that it is my footer which is shown there – when I change the color of my footer-area it also changes the color between my menu and my picture. Well, still dont know what to do, but maybe this info helps you helps me ((-:

  9. gsevans 9 years, 7 months ago

    Did anyone get this working? i have used all of the following in custom css and nothing is working:

    .home #main {
    padding: 0 !important;
    }

    #main {
    padding-top: 0;
    }

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

    header#masthead hgroup {
    margin: !important;
    }

    header#masthead {
    padding: 0 1px 0 0 !important;
    }

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

    • Andrew Misplon Staff 9 years, 7 months ago

      Hi gsevans

      We’ll respond in the new thread you created. Thanks.

  10. Andy Ruan 9 years, 7 months ago

    I found that it is actually the default title of the page that causes a roughly 15px gap even if you don’t have a title. ^_^
    Try:
    .entry-header {
    display: none;
    }

  11. Andrew Misplon Staff 9 years, 7 months ago

    Thanks Andy

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread