Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Masonry and Bootstrap navigation problem

I am creating a photography website using Bootstrap and made a dynamic photo layout with Masonry, everything works fine in desktop mode, but on small devices navbar toggle doesn't work properly. When it collapses, the background of nav dropdowns disappears. How can I fix this?

If I remove Masonry, it works fine on any device, so I believe that a problem is with Masonry.

For Masonry I'm using this code:

$(document).ready(function(){ var $container = $('.container');

$container.imagesLoaded( function() { $container.masonry({ itemSelector : '.photo', columnWidth : '.photo', transitionDuration : 0 }); }); });

Thank you

3 Answers

Kevin Korte
Kevin Korte
28,149 Points

I'm not familiar enough with these two together to offer any other solution, but if you're using jQuery you could do something like this:

if( $(window).width() <= 767) {
   $container.imagesLoaded( function() { $container.masonry({ itemSelector : '.photo', columnWidth : '.photo', transitionDuration : 0 }); }); });
}

This way it won't initialize masonry when the screen is 767px or smaller, which I believe is the default point that bootstrap uses the mobile navigation.

Hope that solves it for you. I still wonder if there isn't a more elegant solution in there somewhere.

Also I thought of a solution, but don't know how to implement it, so if someone has an idea, please let me know.

My solution is quite simple - to remove Masonry in small devices as Bootstrap places them vertically which works for the size of photos I'm using.

The question is, how can I remove Masonry for small devices?

Hi Kevin,

Many thanks for your reply! I got it to work finally and if statement did work, however after a few days of trying I realised that I had one more mistake and it should be{ var $container = $('#masonry');

I also extensively research online and tried all other suggestions but they didn't work for me. I am very new to development so maybe I had bugs that didn't allow me to succeed even though I was on the right path. I believe it should also be possible to do with masonry destroy function.