Jetpack sharing icons causing empty space at bottom of browser window

[mharpen]

Hi J. if you look at http://2121kuhiotower.com/?page_id=2 (the “Background” page on website), and scroll to the bottom you’ll see a lot of empty space below the boxed body content. The amount of space varies between pages. When I use the Developer options in IE9 and click on the empty space, it shows an h3 element with a span.header-shade class that seems to be causing this.  If I uncheck the checkbox in IE Developer tools for the span.header-shade the empty space goes away. Is it possible the Jetpack share icons div are sharing a class with the same name in your theme which is maybe causing this?  If I turn off showing the Sharing icons in Jetpack the problem goes away.  Jetpack is pretty commonly used I believe.  Please take a look and let me know if there’s anything I can do to prevent the large empty space below the pages.  Thank you.

Topic

[Jason Bobich]

Try just putting this in your Custom CSS option on your Theme Options page:

.header-shade { display:none; }

[mharpen]

Thanks J!  I had to add the !important rule to make it work.

.header-shade { display:none !important; }

Just curious, isn’t .header-shade used in  the theme for something? Will this affect any styling in Alyeska?

[mharpen]

J, one suggestion please. The theme’s CSS style box size is kinda small to work with, especially if you include comments.  Maybe make it taller and wider in the future.  I also have some commented out styles in there that I want to keep. Just a lot of scrolling in that small box gets tedious. Thx!

[Jason Bobich]

Just curious, isn’t .header-shade used in the theme for something? Will this affect any styling in Alyeska?

Yup, the theme adds the class to all headers so that they can have a fancy little shade to them. If you wanted to target the header-shade class within whatever specific element of the jetpack plugin, then you could do that as well.

.whatever .header-shade { display:none !important; }

The theme’s CSS style box size is kinda small to work with, especially if you include comments. Maybe make it taller and wider in the future.

If you’re making enough CSS edits to where this is relevant, you should have a Child theme setup and make your CSS customizations there.

See this video: http://vimeo.com/41331677

[mharpen]

For anyone else interested, this solves the issue above if you have jetpack sharing icons enabled on pages and posts.

/* fix large space below body when using jetpack share icons */
.sharedaddy .header-shade { 
	display:none !important;
}

[Jason Bobich]

Thanks for sharing. 🙂

[amymarquez]

Thank you so much for posting this! This fixed two problems I was having.

[Author]

Replies