Jump to content


Photo
* * * * * 1 votes

Spacing Adjustments Between Elements

Header spacing adjustment

Best Answer Rob , 06 December 2012 - 10:41 PM

You adjust the CSS of elements using tools such as Firebug for Firefox or the inspection tools available in most browsers.

 

In your site, two factors appear to be affecting the spacing:

1.  Custom code.  I found this:

 
body.fixed_width .section-branding .content-pad {
    padding: 25px;
}

Which applies 25px padding around each side. 

 

You can replace it with this to adjust the bottom:

 
body.fixed_width .section-branding .content-pad {
    padding: 25px 25px 0;
}

2. The other factor is that your header image contains quite a bit of empty space top and bottom. The graphics push the image down, then the CSS was adding 25px around it on all sides.

Go to the full post


  • Please log in to reply
4 replies to this topic

#1 vmac

vmac

    Newbie

  • Members
  • 5 posts
  • Country: Country Flag

Posted 06 December 2012 - 09:28 PM

HI

How do I adjust the spacing between the header and the top of the content area? I would also like to adjust spacing in other places too.

Note I have no knowledge of coding so pleas make your explanation very clear and specific, i.e. exactly where do I find the place to make the change?

Here's the url:

Please Login or Register to see this Hidden Content

 

I want to move the header up towards the top of the cream-colored box, so other elements on the page will also be higher.

 

Thank you for your help!

 

 

Attached Files



#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 06 December 2012 - 10:41 PM   Best Answer

You adjust the CSS of elements using tools such as Firebug for Firefox or the inspection tools available in most browsers.

 

In your site, two factors appear to be affecting the spacing:

1.  Custom code.  I found this:

Please Login or Register to see this Hidden Content

Which applies 25px padding around each side. 

 

You can replace it with this to adjust the bottom:

Please Login or Register to see this Hidden Content

2. The other factor is that your header image contains quite a bit of empty space top and bottom. The graphics push the image down, then the CSS was adding 25px around it on all sides.



#3 vmac

vmac

    Newbie

  • Members
  • 5 posts
  • Country: Country Flag

Posted 06 December 2012 - 10:48 PM

Thank you for the quick response. When you say you found this custom coding, where did you find it? i.e. Where do I find it to replace it?

 

I thought the graphic was filling the box... I'll check it, thank you!



#4 James B

James B

    Advocate

  • Members

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

Posted 07 December 2012 - 01:05 AM

You enter custom code in Pagelines>Site options>custom code.

 

Rob found the current coding you have on your site using firebug which is a web inspection tool :-)



#5 vmac

vmac

    Newbie

  • Members
  • 5 posts
  • Country: Country Flag

Posted 10 December 2012 - 07:25 PM

Thank you, that worked great. 







Also tagged with one or more of these keywords: Header, spacing, adjustment