Need help? Check out our Support site, then


Imbalance header customisation: blank space at the bottom

  1. Hi everyone,

    I changed the size of the header's image in my blog (theme Imbalance 2), and then I had to change the position of the menus and widget in my header for it to remain esthaetic.

    But now, I have all this blank space at the bottom of my header, before my articles and posts.
    What can I do to erase this blank space ?

    Many thanks for your help!
    Here is the css code I used to change the header :

    /*Size F20 logo in the header*/
    #header-image-link img {
    display: none;
    }

    #header-image-link {
    display: block;
    background: url('http://f20creativefrance.files.wordpress.com/2014/05/cf-f20-cmyk_mod-270px.jpg') no-repeat;
    width: 270px;
    height: 169px;
    }

    /*position English menu*/
    #header-left {
    position: relative;
    width: 100%;
    top: -150px;
    left: 350px;
    }

    /*position French menu*/
    #header-center {
    position: relative;
    width: 100%;
    top: -293px;
    left: 650px;
    }

    /*position search widget */
    #header-right {
    position: relative;
    width: 100%;
    top: -240px;
    left: 0px;
    }

    The blog I need help with is f20creativefrance.com.

  2. Hi there, #header has 50px of padding at the bottom. Add this and adjust as desired.

    #header {
    padding-bottom: 50px;
    }

    If that isn't quite enough (at 0) then you can also adjust the bottom margin on #header: before.

    #header:after {
    margin-bottom: 40px;
    }
  3. Thanks, sacredpath

    After several attempts, I used those specification :

    #header {
    padding-bottom: 0px;
    }
    #header:after {
    margin-bottom: -90px;
    }

    and it's a little bit better. The height of the blank space is reduced, but it's still there.

    Maybe I need to change something in the first code lines I used to change the header ?

  4. I don't see that code in your custom CSS - is it possible you accidentally didn't save it? This is all the custom CSS I see at the moment:

    .category .page-title {
    	font-size: 0;
    }
    
    .category .page-title span {
    	font-size: 2rem;
    }
    
    /*alignement centré du logo Ambassade dans le footer*/
    #footer-left {
    	position: relative;
    	width: 100%;
    	text-align: center;
    	left: 44px;
    }
    
    /*taille de l'image calendrier*/
    #main #content img {
    	max-width: 1222px;
    }

Topic Closed

This topic has been closed to new replies.

About this Topic