Archived

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

  • 0

White space between page content and boxes


Question

Posted · Report post

Hello,

 

As my topic title states, I am seeing an unusually large amount of white space between the page content and the boxes I have set to display. I have just upgraded to 2.4.1, but have never built a page until after updating, as I have only recently purchased Framework.

 

The page for example, (as this is happening to any page built with template 1): 

 

http://www.theviewingscreen.com/?page_id=3904

 

 

I have crawled the forums trying many different options presented that seemed similar to mine, such as adding:

 

#site #page, #site #dynamic-content {
    min-height: 240px;
}

 

 

to my Custom CSS, and it has not worked. I do believe it does have something to do with #dynamic-content, because when I look at the CSS in the console, it highlights the page content area, including all the white space, and says it is 960x608.

Also, I notice that my boxes, while set to display from the page, (and not the template), show as though they are part of the 'more foot area'. Perhaps all of this is how it is supposed to be, I'm really not sure.

 

At any rate, any help to take out that white space would be greatly appreciated.

Thanks,

Lorrell.

Share this post


Link to post
Share on other sites

5 answers to this question

Posted · Report post

Hi,

 

There's a few pieces of CSS that are affecting the site.

 

Here's some examples you can find with Firebug for Firefox or Chrome's built-in Inspection Tool:

.hentry .hentry-pad {
    padding: 0 0 25px;
}

You can see that 25px.  It's adding that much space at the bottom of the content area, below the social media icons you've embedded (nicely).

 

This one needs to have some code added to reduce the bottom padding to 0.

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

You can see it has padding-top: 10px; but not padding-bottom: 0;

 

Together, those two elements shave 35 pixels off the gap between the social icons and the top box.

 

You can achieve more, with Firebug.  I hope this helps.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi,

 

Your site is in Maintenance mode, so we are unable to see the issue, please disable so we can take a closer look.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Danny,

 

Apologies, I have turned off maintenance mode.

 

Thanks, Lorrell.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Rob,

 

Thanks for the leads on the CSS! I have only used the Chrome tool, but per your suggestion, I am trying out the Firefox/Firebug.  It seems much easier to sleuth around in the code. 

Going to try and find some more areas to reduce the white space.

Curse those social icons! ;)

 

Thanks again,

Lorrell 

Share this post


Link to post
Share on other sites

Posted · Report post

I have resolved your topic by accepting Robs answer, if you require further assistance related to white space, please reply here and we can remove the Resolved prefix for you.

Share this post


Link to post
Share on other sites