Removing space between site content and menu

  • Unknown's avatar
    arbsdesign · Member ·

    Hi There,

    I need help with my site, i use a banner image for my pages instead of a page title, and i have hidden the page title by using:

    h2.entry-title {
    display: none;
    }

    BUT, there is a huge gap between my menu and the page content. i want the photos to be gapless under the menu.

    i have tried about 10 difference CSS things form the forums on wordpress support, but their either made no difference to the page OR one of them made each page move the content a different height?

    any help would be appreciated

    my site is

    http://www.arbsdesign.com

    thanks

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    arbsdesign · Member ·

    I should also note that i am a wordpress.com user on the business plan using the Gateway theme

    thanks in advance

  • Unknown's avatar
    siobhyb · Member ·

    Hi @arbsdesign,

    You can reduce the gap between the content and the menu with the following custom CSS:

    @media only screen and (min-width: 50em) {
    .site-content {
        margin-top: 1em;
    }
}

    Increase/decrease the value of margin-top to increase/decrease the amount of margin between the content and the menu. Please note that increments/decrements of 0.1 are enough to have an impact e.g. 0.9em, 0.8em, etc.

    Let me know if that helps out or if you have any extra questions on that.

  • Unknown's avatar
    arbsdesign · Member ·

    Hi,

    Thanks for the help. this did reduce the gap as you cans see (www.arbsdesign.com) but there is still a gap, is it possible to be gapless?

    I tried making the number a minus and found -2.5 to work but on one of my pages the photo overlapped the menu slightly? also it had no efffect on the mobile version with the gap still there

    also is there a way of making the banner photos i use full width without the rest of the page being full width

    thanks for your help

  • Unknown's avatar
    siobhyb · Member ·

    Hi @arbsdesign,

    To completely remove the gap across all devices, try the following snippet:

    .site-content, .entry-content, .entry-content p:first-of-type  {
    margin-top: 0;
}

.entry-header {
    margin-bottom: 0;
}
  • Unknown's avatar
    arbsdesign · Member ·

    Hi @siobhyb

    Thanks for your reply,

    this seemed to work in the CSS view but when i look at the site live (on another computer for example) it doesn’t appear to have worked?

    then when i go back into the CSS, the gap is back again and the CSS i added has also gone? can you help me understand why?

    Thanks

  • Unknown's avatar
    siobhyb · Member ·

    Hi @arbsdesign,

    Can you remove the following CSS from the end of your editor? It doesn’t have any closing braces and may be the cause of the trouble here:

    @media only screen and (min-width: 50em) {

    Add the CSS I provided back after removing the above and let me know if that helps.

  • Unknown's avatar
    arbsdesign · Member ·

    Hi @siobhyb

    This works perfectly now thank you!

    However there is one page that seems to still have a tiny gap (arbsdesign.com/about) is it something to do with the image on that page?

    Thanks

  • Unknown's avatar
    siobhyb · Member ·

    Hi @arbsdesign,

    If you navigate to the HTML editor for that page, you’ll find that there’s some H3 tags at the very top of the page and also surrounding the image:

    <h3 style="text-align:center;"></h3>

    Remove those tags to get rid of the gap.

  • The topic ‘Removing space between site content and menu’ is closed to new replies.