3 equal-column footer

Support Area Forums Elite 3 equal-column footer

Viewing 4 posts - 1 through 4 (of 4 total)
URL to the page in question:
  • Author
    Posts
  • #15883
    Nicholas Minnich
    Participant

    Hi Bill, hope you had a Merry Christmas!

    I think the cascading grid layout (masonry) in the footer is cool. However, how can I force it to have 3 equal-width columns on desktop and 1 centered column on tablets/mobile? I will only have 3 widgets in the footer. dcgreens.org/fy14/

    Thank you!

    #15885
    Bill Robbins
    Moderator

    Hello Nicholas,

    Nice looking site you have there. You can remove the masonry effect from the theme. Here’s how to do that:

    1. Go to the Appearance section in your WordPress control panel and select Edit.
    2. From the list of files on your right, choose custom-js.php
    3. Find this section:
      <?php if ( is_active_sidebar( 'footer_sidebar' ) ) { ?>
      
      // Masonry for Home page widgets
      	var $container = jQuery('#footer-sidebar');
      		$container.imagesLoaded(function(){
      		$container.masonry({
      			itemSelector : '.widget',
      			gutterWidth  : 60,
      			isAnimated   : true,
      			columnWidth	 : 340
      		});
      	});
      	
      <?php } ?>

      and delete it. Then save your changes.

    4. Next go to the Theme Options page and select the Styling tab.
    5. Scroll down to the Custom CSS box and paste this:
      
      #footer-sidebar .widget {
           width: 33%;
           padding-left: 10px;
           padding-right: 10px;
      }
      
      @media only screen and (max-width: 767px) {
      	
           #footer-sidebar .widget {
                width: 100%;
                padding-left: 10px;
                padding-right: 10px;
           }
      
      }
      

      and save your changes.

    I believe that will fix things so you have three equal width widgets in desktops and full width ones on mobile devices without using Masonry.

    If you run into any questions or trouble, let me know.

    Thanks and have a Happy New Year,
    Bill

    #15904
    Nicholas Minnich
    Participant

    Worked like a charm. Looks great! Thanks. Happy New Year!

    #15905
    Bill Robbins
    Moderator

    Glad to hear that worked for you. Happy New Year to you too!

Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘3 equal-column footer’ is closed to new replies.