Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #25554


    I have added

    #socket .container {

    padding: 5px 0;


    to the quick css

    I notice that when a page has not as many content as other pages, the socket seems to become wider (large piece of same color underneath it). How can I resolve this? I want the footer + socket to be at a fixed place with the same width.

    Thanks a lot for your help!


    Unfortunately there’s (currently) no real fix for this issue. The content container height depends on the content and if there isn’t enough content the container height won’t cover the viewport height – in this case the content container ends before the bottom of the screen and the body background is visible at the bottom. I’d suggest to use the same color for the socket and the body/html background – then the user won’t notice that the body/html background is different and the user will just notice that the socket height varies from page to page.

    I found some jquery scripts – eg http://josephfitzsimmons.com/home/ (Purchase code hidden if logged out) / or http://www.egstudio.biz/sticky-footer-with-jquery/ which will add a margin to the footer div if the content container height doesn’t exceed the viewport but I feel it’s very buggy and doesn’t always work as expected. In addition it will maybe break the responsive layout (didn’t test this though)

    However if you want to try it add following code to the bottom of enfold/js/avia.js:

    jQuery(document).ready(function() {
    var footer = jQuery("#footer");
    var pos = footer.position();
    var height = jQuery(window).height();
    height = height - pos.top;
    height = height - footer.height();
    if (height > 0) {
    footer.css({'margin-top' : height+'px'});

Viewing 2 posts - 1 through 2 (of 2 total)

The topic ‘Socket Size & color’ is closed to new replies.