Jump to content


Photo
- - - - -

Reduce space below Masthead

masthead spacing whitespace padding

Best Answer James B , 11 January 2013 - 01:25 AM

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;

}

""

Go to the full post


  • Please log in to reply
10 replies to this topic

#1 peters_publishing

peters_publishing

    Super Member

  • Members

  • 152 posts
  • Country: Country Flag

Posted 10 January 2013 - 01:36 AM

Hello! I'm trying to reduce some of the massive amount of whitespace between the Masthead section and the Highlight section on this page: 

Please Login or Register to see this Hidden Content

 

I've tried using the suggestions here:

Please Login or Register to see this Hidden Content

 

and here:

Please Login or Register to see this Hidden Content

 

and a few variations on them, but without success.

 

 



#2 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 10 January 2013 - 02:03 AM

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

Please Login or Register to see this Hidden Content

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

 

Please Login or Register to see this Hidden Content



#3 peters_publishing

peters_publishing

    Super Member

  • Members

  • 152 posts
  • Country: Country Flag

Posted 10 January 2013 - 06:34 AM

James,

 

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

 

I have kept this piece of the code;

Please Login or Register to see this Hidden Content

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

 

Paul



#4 Danny

Danny

    Is Awesome!

  • Moderators
  • 17013 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 10 January 2013 - 08:10 AM

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.



#5 peters_publishing

peters_publishing

    Super Member

  • Members

  • 152 posts
  • Country: Country Flag

Posted 10 January 2013 - 05:49 PM

Ok, I tried this:

 

Please Login or Register to see this Hidden Content

 

And this:

Please Login or Register to see this Hidden Content

 

But they had no effect. 



#6 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 10 January 2013 - 06:14 PM

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

 

Please Login or Register to see this Hidden Content



#7 peters_publishing

peters_publishing

    Super Member

  • Members

  • 152 posts
  • Country: Country Flag

Posted 10 January 2013 - 07:27 PM

Catrina,

 

 

Tried this:

Please Login or Register to see this Hidden Content

 

And this:

Please Login or Register to see this Hidden Content

 

And this:

Please Login or Register to see this Hidden Content

 

No difference. Flushed the cash each time too. 



#8 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 11 January 2013 - 01:25 AM   Best Answer

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.

 

Please Login or Register to see this Hidden Content

""



#9 peters_publishing

peters_publishing

    Super Member

  • Members

  • 152 posts
  • Country: Country Flag

Posted 11 January 2013 - 04:45 PM

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.



#10 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 11 January 2013 - 09:26 PM

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.



#11 peters_publishing

peters_publishing

    Super Member

  • Members

  • 152 posts
  • Country: Country Flag

Posted 13 January 2013 - 07:15 PM

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







Also tagged with one or more of these keywords: masthead, spacing, whitespace, padding