Removal of space above banner and below menu

  • Joshaw

    (@joshaw)


    10 years, 8 months ago

    Hi,
    I’m having some trouble with the layout of my page and wondered if anyone could advise?
    I’d like to remove the space between the header banner and the top of the page. I’ve put a social media widget there but want to reduce the margins so that there’s less emtpy space above and below the widget. I tried pasting the following into my child theme but it didn’t work-

    .header-widget {
    float: right;
    margin: 0px;
}

    I’d also like to reduce the space between the menu and the the start of my content.

    My site is: http://premierscaffoldtowersliverpool.co.uk.gridhosted.co.uk/

    Thanks in advance =)

Viewing 4 replies - 1 through 4 (of 4 total)
  • wp-21

    (@wp-21)

    10 years, 8 months ago

    Hi,
    The code should work, try using important!:

    .header-widget {
    float: right;
    margin: 0 !important;
}

    and no need of px when 0.
    And for the space between the menu and the content reduce this argin to 0.

    #main {
    margin-top: 40px;
}

    Cheers..:)..

    Thread Starter Joshaw

    (@joshaw)

    10 years, 8 months ago

    Thanks wp-21!

    Can I ask why !important needed to be used?

    Removing the space between the menu and the content worked one the home page but not for the other pages on the site and I can’t figure out why. Do you have any suggestions?

    Thanks

    wp-21

    (@wp-21)

    10 years, 8 months ago

    Hi joshaw,
    Yea, the important is used or often misused for overriding any unwanted css rules.The rule with !important gets applied with topmost priority but using !important frequently and unnecessarily can cause a lot of problems in future, for this pls refer to great article:

    http://css-tricks.com/when-using-important-is-the-right-choice/

    In your case try not removing !important and then see if it works, i did that in firebug and it worked.

    Should use important only as a last alternative.

    wp-21

    (@wp-21)

    10 years, 8 months ago

    And regarding that space appearing in the other pages, It is due to margin applied on the p tag.

    I see that you have placed the image first and aligned it to the right, but that image is being surrounded by p tag on which a margin top and bottom of 16px is being applied somewhere in your css.

    You just need to reset the margin on p tag to ensure the space is removed on all of the pages.

    Cheers..:)..

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Removal of space above banner and below menu’ is closed to new replies.