Jump to content


Photo
- - - - -

Removing Whitespace Between Content Section and Following Section


Best Answer James B , 23 March 2013 - 04:19 AM

Ok its a combination of different elements making up all that space.

 

I use firebug as it shows the areas which have padding/margins as a highlighted blue or yellow block, i find that's the quickest and easiest way to track them down. I would imagine chrome has something similar.

 

So when you inspect the element, scroll up and down in the html just above and below the element you land on, if you see a block of thick dark blue/yellow appear that indicates that that div you're hovering over has the padding/margin applied to it.

 

So click on that div and you'll see the css load up in the right hand window and you'll be able to track it down.

 

Recorded you a short video to show this - http://screencast.com/t/QdC5BCs3

 

So from there you can see there's 25px padding in the .hentry-pad and a margin of 25px in the first-post.

 

But if you then looker deeper into that section you'll see each of the ba boxes have additional margins applied to.

 

http://screencast.com/t/8yEwNfROP

 

Hope that helps

Go to the full post


  • Please log in to reply
5 replies to this topic

#1 James Giroux

James Giroux

    Community Director

  • Moderators

  • 150 posts
  • LocationOttawa, Canada
  • Framework Version:Developer
  • Country: Country Flag

Posted 23 March 2013 - 03:12 AM

Hey There.  So I've looked around the forums a bit and have discovered that this is a fairly common request but most of the responses are section specific.  Meaning, that when someone wants whitespace removed, the response is specific to the section selectors they need.  So, in an effort to round out that system (and get my question answered), on my home page I have my content section placed before my callout section, however the amount of padding/whitespace is excessive.  What are the CSS selectors I should be referencing when trying to reduce the vertical distance between sections?  For example, what I've seen other places is stuff like this:

 

Please Login or Register to see this Hidden Content

 

That doesn't seem to do the trick.  When I look at it through Chrome Dev Tools, I can't seem to find a selector that specifies padding for the content, so here's where I need some help.  

 

Here's a screencast link:

Please Login or Register to see this Hidden Content

 

Thanks for any direction on how to fix this.

 

James.



#2 James B

James B

    Advocate

  • Members

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

Posted 23 March 2013 - 03:56 AM

Hi James

 

Can we take a link to the live page please and we'll take a look. From the screenshot image you attached the css you pasted above should have removed a bulk of the space from what I can see.



#3 James Giroux

James Giroux

    Community Director

  • Moderators

  • 150 posts
  • LocationOttawa, Canada
  • Framework Version:Developer
  • Country: Country Flag

Posted 23 March 2013 - 03:57 AM

Please Login or Register to see this Hidden Content



#4 James B

James B

    Advocate

  • Members

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

Posted 23 March 2013 - 04:19 AM   Best Answer

Ok its a combination of different elements making up all that space.

 

I use firebug as it shows the areas which have padding/margins as a highlighted blue or yellow block, i find that's the quickest and easiest way to track them down. I would imagine chrome has something similar.

 

So when you inspect the element, scroll up and down in the html just above and below the element you land on, if you see a block of thick dark blue/yellow appear that indicates that that div you're hovering over has the padding/margin applied to it.

 

So click on that div and you'll see the css load up in the right hand window and you'll be able to track it down.

 

Recorded you a short video to show this -

Please Login or Register to see this Hidden Content

 

So from there you can see there's 25px padding in the .hentry-pad and a margin of 25px in the first-post.

 

But if you then looker deeper into that section you'll see each of the ba boxes have additional margins applied to.

 

Please Login or Register to see this Hidden Content

 

Hope that helps



#5 eileen

eileen

    Member

  • Members
  • 15 posts
  • Framework Version:baseline
  • Country: Country Flag

Posted 17 April 2013 - 08:31 PM

thanks for trying to help. I see all of my padding and they all seem to be set to 0. Do you think that I have eliminated all of the padding on my site and the white spaces just have to stay as is?



#6 James B

James B

    Advocate

  • Members

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

Posted 17 April 2013 - 08:39 PM

Hi Eileen,

 

I've just checked your site and yes, looks like you've done a good job. There's no padding around the logo, the nav or the boxes that I can see. The logo seems to have a gap at the bottom before the nav, but that's due to the section being given a set height of 130px, not to padding. That will be coming from the .section-branding