Home>Support>Get rid of margin between header and first page builder row

Get rid of margin between header and first page builder row

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. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 7 years, 5 months ago kendall

    #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. 7 years, 5 months ago Andrew Misplon Hi, I Work Here

    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. 7 years, 5 months ago Valentin Zambelli

    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. 7 years, 5 months ago Valentin Zambelli

    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. 7 years, 5 months ago kendall

    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. 7 years, 5 months ago Andrew Misplon Hi, I Work Here

    Give this a go:

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

    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. 7 years, 4 months ago Jonas Holm

    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. 5 years, 6 months ago gsevans

    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;
    }

    • 5 years, 6 months ago Andrew Misplon Hi, I Work Here

      Hi gsevans

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

  10. 5 years, 6 months ago Andy Ruan

    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. 5 years, 6 months ago Andrew Misplon Hi, I Work Here

    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.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More