3 equal-column footer
URL to the page in question:
-
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!
Hello Nicholas,
Nice looking site you have there. You can remove the masonry effect from the theme. Here’s how to do that:
- Go to the Appearance section in your WordPress control panel and select Edit.
- From the list of files on your right, choose custom-js.php
- 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.
- Next go to the Theme Options page and select the Styling tab.
- 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
Worked like a charm. Looks great! Thanks. Happy New Year!
Glad to hear that worked for you. Happy New Year to you too!
- The topic ‘3 equal-column footer’ is closed to new replies.