WordPress.org

Forums

[resolved] Get rid of two white spaces (11 posts)

  1. fairmediacouncil
    Member
    Posted 1 year ago #

    Hello,

    My website has a white space between the very top banner logo and the logo below it. It also has another white space between the second logo and the navigation bar.

    I would like to get rid of both of these.

    I do know for the space between the two logos that the following code may have something to do with it:

    #header {
     display: block;
        margin-left: auto;
        margin-right: auto
    }
    #header .logo {
       width: 500px; margin: 0 auto;
    }
    #header .logo .text-logo {
      font-size: 110px;
      line-height: 110px;
      margin: 0 0 -10px 0;
      text-transform: none;
      font-weight: normal;
      font-family: 'Damion', cursive;
      overflow: visible;

    Please let me know if there is anything I can do to rectify this. Thanks for your help.

  2. esmi
    Forum Moderator
    Posted 1 year ago #

    Try using Firefox with the Firebug add-on for this kind of CSS troubleshooting. Or use whatever developer tool is available in your web browser.

  3. lorro
    Member
    Posted 1 year ago #

    The white space bottom margin to the topmost image is part of the image. You can either edit the image to remove the white, and re-upload it, or set the height of the div and hide the white part which overflows with this in your custom css:
    #header {height:90px; overflow:hidden}

    The second gap can be hidden with this custom css:
    .logo p {margin: 0}

  4. fairmediacouncil
    Member
    Posted 1 year ago #

    Thank you for your responses.

    I added the following to my css:

    #header {
     display: block;
        margin-left: auto;
        margin-right: auto
        margin-top: -25px }
    }
    #header {height:90px; overflow:hidden}
    }
    #header .logo p {margin 0}
       width: 500px; margin: 0 auto;

    And no changes occurred.

    Did I place the changes properly?

  5. fairmediacouncil
    Member
    Posted 1 year ago #

    OK! I moved the {height:90px; overflow:hidden} next to the top #header and that worked!

    Now, the only space that remains is above the nav bar.

    Is that coding I should add to the navigation section?

  6. lorro
    Member
    Posted 1 year ago #

    No, its a new separate little bit.

  7. fairmediacouncil
    Member
    Posted 1 year ago #

    Okay, would you recommend anything to get rid of that space?

    #header .logo p {margin 0}
       width: 500px; margin: 0 auto;

    Is the code I have for that spot in the header now. I know you told me to add the margin 0 part but I think I added it incorrectly.

  8. lorro
    Member
    Posted 1 year ago #

    Hi, No, these are separate bits:

    #header .logo {
       width: 500px; margin: 0 auto;
    }
    
    .logo p {margin: 0}
  9. fairmediacouncil
    Member
    Posted 1 year ago #

    Amazing, that worked a wonder too. Thanks for all your help! Much appreciated!

  10. fairmediacouncil
    Member
    Posted 1 year ago #

    When I look at my site through mobile the gap between the top banner and logo below it shows again. Any idea how to close that for the mobile view?

  11. fairmediacouncil
    Member
    Posted 1 year ago #

    Nevermind, got it.

Topic Closed

This topic has been closed to new replies.

About this Topic