Footer widgets won't float correctly on small screens

  • Resolved clb109

    (@clb109)


    8 years, 11 months ago

    I’m using the Twenty Fourteen theme and customised the footer widget area to use 3 evenly spaced text widgets as per previous forum posts.

    See site here: https://www.websitesforaviators.com

    It looks good on desktop screens but for some reason the responsive code has broken somewhere and the widgets will not move underneath one another and maintain their width. Instead they shrink and all of the text becomes jumbled.

    I’ve attempted to use CSS to fix the issue but I think there might be a javascript issue and that’s above my area of knowledge.

    I recently added this to the functions.js file and changed the standard 4 column footer to a 3 column footer. Could this have something to do with it? (see code below).

    // Arrange footer widgets vertically.
    if ( $.isFunction( $.fn.masonry ) ) {
    $( ‘#footer-sidebar’ ).masonry( {
    itemSelector: ‘.widget’,
    columnWidth: function( containerWidth ) {
    return containerWidth / 3;
    },
    gutterWidth: 0,
    isResizable: true,
    isRTL: $( ‘body’ ).is( ‘.rtl’ )
    } );
    }
    function remove_masonry() {
    if ( is_active_sidebar( ‘footer-sidebar’ ) ) {
    wp_dequeue_script(‘jquery-masonry’);
    }
    }

    add_action( ‘wp_print_scripts’, ‘remove_masonry’, 100 );

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

  • This looks to be a css issue, right now I’m seeing this code around line 3243 of your style sheet:

    #text-4, #text-3, #text-2 {
    width: 33.3% !important;
    margin: 0;
}

    You’ll want to adjust that to be 100% width until you want them to be three columns at a certain breakpoint, likely tablet or desktop view. Hope that helps get you started.

    Thread Starter clb109

    (@clb109)

    Excellent, thank you!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Footer widgets won't float correctly on small screens’ is closed to new replies.