Archived

This topic is now archived and is closed to further replies.

  • 0

Reduce space below Masthead


Question

Posted · Report post

Hello! I'm trying to reduce some of the massive amount of whitespace between the Masthead section and the Highlight section on this page: http://www.skypeenglishclasses.com/payments/

 

I've tried using the suggestions here:

http://www.pagelines.com/forum/topic/21089-change-the-height-of-masthead-section/?hl=space+below+masthead

 

and here:

http://www.pagelines.com/forum/topic/21395-extra-lines-white-space-between-pageline-options-how-to-remove-it/?hl=space+below+masthead#entry124426

 

and a few variations on them, but without success.

 

 

Share this post


Link to post
Share on other sites

10 answers to this question

Posted · Report post

Ok looking in firebug you'll see as you scroll over the html on the right hand side the areas which the padding/margins are applied to, they'll show as a dark blue border or a yellow block. When you see that appear you've on the right div you'll need to edit, so click on the div name in the html and you'll see the assigned css in the left hand screen in firebug. There you'll see the padding thats applied to that section you can edit.

 


#highlight .content-pad {padding-top:0px;}


#highlight .content-pad .highlight-area {
    padding: 0px;

}

"http://i.imgur.com/ju2cU.png"

Share this post


Link to post
Share on other sites

Posted · Report post

James,

 

Thanks, your fix actually did the trick, combined with the changes I made to the masthead... I didn't see that it was working until I cleared my browser cache (facepalm). 

 

Paul

Share this post


Link to post
Share on other sites

Posted · Report post

Ok, I tried this:

 

.highlight-area {margin-top: 0px;}

 

And this:

#highlight-area .content-pad {padding: 0px;}

 

But they had no effect. 

Share this post


Link to post
Share on other sites

Posted · Report post

You need to add the selector #page at the beginning like this:

 

#page #highlight-area

Share this post


Link to post
Share on other sites

Posted · Report post

Catrina,

 

 

Tried this:

#page #highlight-area .highlight-area {margin-top: 0px;}

 

And this:

#page #highlight-area .{margin-top: 0px;}

 

And this:

#page #highlight-area .content-pad {margin-top: 0px;}

 

No difference. Flushed the cash each time too. 

Share this post


Link to post
Share on other sites

Posted · Report post

Still nothing. When I look at it in Firebug, it appears that the Mast head is what is causing the problem, but none of the code changes I've made seem to change it.

Share this post


Link to post
Share on other sites

Posted · Report post

In that case I'd suggest going through any other css you have in the css box and double checking it for errors, anything broken above will stop any css below from working.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi there, for some reasons those older posts are adding the forum shortcode for the 'code' style box. If you ignore the beginning

and end

and just use the bit in the middle it should be fine.

 

#masthead .content-pad { padding: 0px;}

Share this post


Link to post
Share on other sites

Posted · Report post

James,

 

Thanks. I figured that and had already left those pieces of code out. 

 

I have kept this piece of the code;

.masthead {margin-bottom: 0px;}

And it does reduce the amount of space by a little, but not quite enough.

 

Paul

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Paul,

 

What you will need to do is change the padding on the Highlight section. Inspect the Highlight section and then add custom CSS, to reduce the padding-top. This will resolve your website, using Firebug or your browsers web dev tool, you can do this very easily.

Share this post


Link to post
Share on other sites