This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Jetpack sharing icons causing empty space at bottom of browser window

  • Creator
    Topic
  • #312
    mharpen
    Participant

    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.

Viewing 7 replies - 1 through 7 (of 7 total)
  • Author
    Replies
  • #313
    Jason Bobich
    Keymaster

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

    .header-shade { display:none; }

    #314
    mharpen
    Participant

    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?

    #315
    mharpen
    Participant

    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!

    #316
    Jason Bobich
    Keymaster

    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

    #317
    mharpen
    Participant

    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;
    }
    #319
    Jason Bobich
    Keymaster

    Thanks for sharing. 🙂

    #2517
    amymarquez
    Member

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

Viewing 7 replies - 1 through 7 (of 7 total)
  • The forum ‘Alyeska Responsive WordPress Theme’ is closed to new topics and replies.