WordPress.org

Ready to get started?Download WordPress

Forums

Gridiculous
Removal of space above banner and below menu (5 posts)

  1. Joshaw
    Member
    Posted 12 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 =)

  2. wp-21
    Member
    Posted 12 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..:)..

  3. Joshaw
    Member
    Posted 12 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

  4. wp-21
    Member
    Posted 12 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.

  5. wp-21
    Member
    Posted 12 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..:)..

Reply

You must log in to post.

About this Theme

About this Topic

Tags

No tags yet.