• 0
Sign in to follow this  
Followers 0

Spacing

Question

Posted · Report post

Why is there so much spacing? I need the site to be a little tighter. Is there a way to decrease the spaces between widgets, content area, header, footer?

Share this post


Link to post
Share on other sites

19 answers to this question

  • 0

Posted · Report post

I have the same question as indakno. I have searched the forum and tried pasting different recommended code for tighter space between widgets, se below, in Settings->Custom Code (which is the only code I dare to change), but nothing happens: ` .widget { margin-bottom: 1em; } ` Best regards, Pernilla http://www.akersjon.com

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I believe there is a lot of spacing because our developers like it that way. Look at any page on the PageLines website, there is lots of spacing. ;) if you can provide a link to your site and the EXACT area that you would like to have less spacing, we can help you achieve the desired look using custom CSS. @pernillaoberg glad you were able to find a CSS selector you want to change! I don't know if the 1em is the default bottom margin but you can always change it to 0 to make sure your changes are taking affect. Also, when adding custom CSS, I always recommend adding !important after the CSS so you are sure your change is applied, like this: [code].widget { margin-bottom: 1em !important; }[/code]

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

+1 I've spent hours and hours firebugging and removing padding and margins. Even adding negative numbers at times. It would be nice if there were some padding and margin controls in the settings or at page/feature level.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

You can change margins at page level or change margins for different type of pages. I alo found the layout to be very loose, and took some time to make my pages more compact. [url="http://golfclub-stippelberg.nl/nieuws/"]sample[/url] Pagelines has been clever to code in separate divs that provide the padding of all areas on a page. These can easy be recognised because they are all called div.********-pad Apart from all section and space identifiers, they also done the clever thing to add all kind of classes to the body of the pages to identify what page or even what kind of page it is. So the task is to locate the padding div and look in what body or/and section class it is encased. With that info you build your CSS-selector. Sample: [code]/* Indent copy space for posts and remove line and space under pages and posts */ article.type-page, section#postloop.copy.postnav-postloop.postloop-sharebar article.type-post.fpost { border-bottom: none; } article.type-page div.hentry-pad, article.type-page { padding: 0; } section#postloop.copy.postnav-postloop.postloop-sharebar div.hentry-pad { padding: 0 10px; }[/code] This is just a sample.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks simple_mama! It worked, but I had to put a negative value as brasesco said and that made the widgets tighter: .widget { margin-bottom: -2em !important; } Love PageLine - love the support! :-) Pernilla

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

You're welcome! And yes, negative lessens the value whereas positive raises it. :)

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

@simple_mama - My site is indakno.com/atl.The spaces are everywhere. Between each section and widget. Thank you.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

If someone could look at the 300x250 ads at the bottom of indakno.com/atl and help me with the spacing, I would really appreciate it.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

What spacing do you want removed exactly? Keep in mind we can only help you with a limited amount of CSS, we can't design your site for you. ;)

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

www.indakno.com/magazine The more footer widgets. How can I get them to be 300px in width. That's what Im mainly talking about. There are a lot of spacing within the site. I'm not looking for design help, I've designed the site myself. What I do need is help with this template. Thanks in advance.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I don't see more-footer widgets unless I am missing them. You can find the CSS element for any section using [url="http://www.getfirebug.com"]FireBug[/url]. From there, you will be able to find the padding and reduce it as desired.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

They are there now. I have never used firebug but I will look into it.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Right now they are using percentages, which is the best way to do it so they are all even. If you'd like to change the widths, use this CSS code and change accordingly: [code]#morefoot_area .pp3 { width: 31.3333%; }[/code]

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Last question. Where did you find that. I am looking at firebug and I see 10px. How did you find that? Thanks in advance.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Go through the morefoot CSS starting at the parent item (#morefoot_area). This selects the whole area, but you only want to know about 1 box individually, so move down going further into child selectors until it highlights a single box. Clicking that line in the html displays the CSS on the right, where is shows .pp3 with a width of 31.3333%. (I added the #morefoot_area to the code above so you don't need to add !important to the CSS.)

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I know you're probably getting tired of me but this is one last thing. I did what you asked and all it did was resize the morefoot content area and not reduce the spacing that is surrounding it. Go here: http://indakno.com/magazine/atlanta/ scroll down to the morefoot area and you can see the 300x250 ad thats in the middle. It doest fit. And the spacing between the content is too wide. If I could close the spacing a little, maybe I can fit the content in there. I just want to make it at least 300px wide. Help please..

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

It looks like you got this working. Let me know!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Not really. I had to increase the width of my page because I could not decrease the spaces between the columns in the morefoot section in order to get my ad to fit.i really hate all the spacing. Although I do like it, I hate not being able to control it.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

This is where all the padding/margins come from in that section. (I have changed to zeros for you.) If you want, you can put this in your CSS and then adjust the page width as necessary. [code]#morefoot_area .pp3 { margin-right: 0; width: 31.3333%; } #morefoot_area .widget-pad { padding: 0; }[/code] Hope that helps :)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0