extra bottom space

  • Unknown's avatar
    rwhnewton · Member ·

    How do I get rid of the extra space at the bottom of my page? The page with the issues is http://sowingtheseed.wordpress.com/about/. Often the page will load properly and then after a few seconds a bunch of space will appear.

    I’m a complete novice when it comes to CSS and haven’t figured out what is causing the problem. Thank you in advance.

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    rachelmcr · Member ·

    Hi there,

    I took a look at the page you linked to, and I didn’t see the extra space you mentioned. Can you provide a screenshot of what you are seeing? You can upload screenshots to your Media Library under Media > Add New in your dashboard, or you can use an online service such as Snaggy.

    It would also help to know if you see this extra space both when you are logged in and logged out of your WordPress.com account, and if you see it in different web browsers. You can download other browsers to test it here: http://browsehappy.com/

    That information will help me investigate this issue for you. Thanks!

  • Unknown's avatar
    rwhnewton · Member ·

    Thanks for taking a look at this. I replied a few days ago, but I’m not seeing it posted here.

    I’ve only noticed the issue with Safari. Everything appears properly in other browsers.

    I’ve added a screen shot here: http://sowingtheseed.wordpress.com/?attachment_id=2520

    Hope this helps.

  • Unknown's avatar
    rachelmcr · Member ·

    Thanks for sending that screenshot. I am not able to consistently reproduce this issue in Safari, but I have a suggestion for one possible cause and a potential fix you can try.

    In your custom CSS, you have the following code:

    .page #sidebar,
.single-post #sidebar {
	display: none;
}

#main {
	width: 652px;
	background: #F0F0F0;
	height: auto;
}

    The first piece of CSS is hiding your sidebar on pages and single posts, but the second piece is setting the height for your main div (which includes the page content and the sidebar) to auto. It’s possible that the height for that div is being set first, and then the sidebar is being hidden. This would increase the height to the total height of the sidebar (creating the empty space at the bottom of the page) even though the sidebar isn’t showing.

    If that’s causing the problem, you can resolve it by using a page template on your pages instead. The Delicious Magazine theme includes a full-width page template, which would remove the sidebar from those pages completely. (That way you don’t need to remove it with CSS.) You can change the page template in the page editor for each page, in the Page Attributes module.

    Since I’m not able to consistently reproduce the issue I can’t be sure this is the problem, but I’d suggest giving it a try. Please let me know if you have any questions about that, and let me know if it resolves the issue for you. :)

  • Unknown's avatar
    rwhnewton · Member ·

    Perfect! This fixed it. Should I get rid of the custom CSS as well to make things more clean? I want to practice good etiquette. :)

  • Unknown's avatar
    rachelmcr · Member ·

    I’m so glad that worked! :)

    You can remove “.page #sidebar” from the first piece of CSS and just leave this:

    .single-post #sidebar {
	display: none;
}

    The full-width page template only works on page, not on single posts, so you still need that code to hide the sidebar on single posts. You won’t want to make changes to the #main CSS, either.

    Let me know if you have any questions about that. :)

  • The topic ‘extra bottom space’ is closed to new replies.