CODEWITHSUNDEEP
jqueryjquery-masonry
Alex Park
Alex Park

Reputation: 11

How do I disable the "responsive" part of masonry?

I have a fixed width on my content div (filled with different sized images) and I don't want the images to re-size or re-organize according to the browser. How can I disable the responsiveness part of masonry?

I'm using masonry because it is resizing my images perfectly inside my div, but I just need the responsive part of it removed.

I've already removed all the "max-width" codes in the css (which takes care of the image resizing), but the main problem is that the images start to stack on top of each other when I re-size the browser to a smaller size. I don't know if this is happening because of the jquery files or if it's in my css?

Any help would be super appreciated, thanks!

Upvotes: 1

Views: 4188

Answers (2)

Bijaya Kumar Oli
Bijaya Kumar Oli

Reputation: 2193

You need to call masonry js with the width of the desired screen ( mobile = 640 )

if ($(window).width() > 640) {
            $('.grid').masonry({
              // options
              itemSelector: '.grid-item',
              columnWidth: 0
            });
        }

Upvotes: 0

jonny
jonny

Reputation: 736

http://masonry.desandro.com/docs/options.html

isResizable

Triggers layout logic when browser window is resized.

you need to set isResizable to false

$('#container').masonry({
  isResizable: false,
});

Upvotes: 1

Related Questions