White space above pages

  • Hi! Just wondering how to reduce the white space I have between the header and the title/content of my pages – such as the about/services/projects etc, on the different posts i have uploaded they appear to have less white space than the pages?. Here is my website

    Here is my css code: 

    /************************* MASTHEAD ************************************/
.pusher {cursor:pointer;}
#masthead { background: padding: 0;border-top:5px solid #000;}
#masthead h4 {margin:1em 0;font-weight: bold; text-transform: uppercase;width:100%;}
#masthead h4 a { color: #333; text-decoration: none; float:left;}
#masthead h4 a:hover {color:#000;}
#masthead span {color:#000;font-size:.8em;text-transform:lowercase;font-weight:normal;}
#masthead span.description {float:left;margin-left: 5px;padding-top:.2em;}
#masthead span.contact {float:right;line-height:1em;}
#masthead span.contact a:hover {color:#000;}

.sf-menu #search form#searchform input#s {background:#fff;width:125px;}
.sf-menu ul {list-style: none;padding: 0;margin: -45px 0 20px 0 ;background-color: #fff;font-size: 1em;height:25px;}
.sf-menu ul li {text-align: right;float: right;height: 25px;margin: 0;background: #999;border-right:1px solid #ccc;padding: 0;}
.sf-menu ul li a {display: block;width: 75px;padding: 7px 5px 22px 7px;color: #999;font-weight:bold;font-size: 14px;letter-spacing:1px;text-align: center;text-decoration: none;text-shadow: 0 0 0 #ccc;}
#navcontainer>.sf-menu ul li a {width: 5px;height: auto;height: 8px}
.sf-menu ul li#active a {background: #333;color: #333;}
.sf-menu ul li#active a {background: #000;color: #000;}
.sf-menu ul li a:hover,.sf-menu ul li#active a:hover {background-color: #fff;color: #9acd32;}
.sf-menu ul li.home {border-right: none;}
.sf-menu ul li li {border:none; border-bottom: 1px solid #333;}

/********************************POSTS ************************* */
.post {display:block;clear:both;}
.postmetadata {color:#ccc;}
.postmetadata a {color:#ccc;}
.postmetadata a:hover {color:#000;}
.underlined {border-bottom:1px solid #000;}
h6.underlined {margin:0 0 1em;}

.nav-image-left, .nav-image-up, .nav-image-right {text-align:center;float:left;width:25px;margin:0 10px 0 2px;}
.nav-image-left a, .nav-image-up a, .nav-image-right a {background:#eee;padding:2px 48% 2px 48%;text-decoration:none;color:#000;}
.nav-image-left a:hover, .nav-image-up a:hover, .nav-image-right a:hover {background:#000;color:#fff;}

.nav {background:#eee;margin:0 0 1em 0;}
.nav:hover {background:#ccc;}
.prev a, .next a {color:#000;text-decoration:none;padding:.2em 1em;}

.nav-interior {margin:0;padding:0;clear:both;display:inline;}
.nav-interior .next {color:#000;text-decoration:none;float:right;}
.nav-interior .prev {color:#000;text-decoration:none;float:left;}
Viewing 3 replies - 1 through 3 (of 3 total)

  • in style.css:

    page = big space: h2 tag

    h1,h2,h3,h4,h5,h6 {margin-top: 80px;color:#000;font-family:"helvetica", Arial, sans-serif;}

    post = small space: h6 tag with class .underlined

    h6.underlined {margin:0 0 1em;}

    try and edit the margin-top: 80px; value; and see what changes.
    (it might be there for a reason, so changing it might have effects in other parts of your site)

    to see the effect of changes to the style.css, you may need to reload the page in the browser or to refresh the browser cache by pressing ‘ctrl f5’ at the same time.

    Thread Starter suizka

    (@suizka)

    Hi! Thanks! I took out the 80 px – i had put it in as it appeared on my browser as having no space at the top. Just another quick question, on my pages I have tried to put an image header in – but there is again a space between the page Title and the image, is there anyway to reduce this space?

    you could try and add this line:

    h2 { margin-bottom: 0px; }

    after this line in style.css:

    h1,h2,h3.underlined {border-bottom:1px solid #000;margin:0 0 1em;color:#000;text-decoration:none;font-weight:bold;font-family:"helvetica", Arial, sans-serif;}

    (there is a chance that this change could effect other areas of your site.

    maybe make a backup copy of your theme files before editing.)

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘White space above pages’ is closed to new replies.