Get rid of two white spaces

  • Resolved fairmediacouncil

    (@fairmediacouncil)


    10 years, 10 months 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.

Viewing 10 replies - 1 through 10 (of 10 total)

  • 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.

    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}

    Thread Starter fairmediacouncil

    (@fairmediacouncil)

    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?

    Thread Starter fairmediacouncil

    (@fairmediacouncil)

    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?

    No, its a new separate little bit.

    Thread Starter fairmediacouncil

    (@fairmediacouncil)

    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.

    Hi, No, these are separate bits:

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

.logo p {margin: 0}
    Thread Starter fairmediacouncil

    (@fairmediacouncil)

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

    Thread Starter fairmediacouncil

    (@fairmediacouncil)

    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?

    Thread Starter fairmediacouncil

    (@fairmediacouncil)

    Nevermind, got it.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Get rid of two white spaces’ is closed to new replies.