Thank you! Your feedback has been delivered
Thank you! Your feedback has been sent

Need help with configuring Isotope masonry layout

I have a wordpress site using pagelines themes. I'm displaying masonry columns (using isotope). Ideal browser width is when it displays 3 columns. I would like for it to stay with 3 columns even when the browser width gets wider. Currently when it does gets wider, it keeps adding more columns per row. you can see the site here dev nxgencapital com

User Gravatar

jp

Posted Jul 2 2014 23:00 UTC

$50


  • Assigned To renekorss
  • Solved
  • isotope
    for the masonry horizontal
  • 1296 Views

14 Replies


Hi jp,

I can't find the isotope on the page provided.

So in your case you have two options:

  • fixed width isotope with width = 3 elements + the paddings
  • fluid isotope with width of the elements in percentage (33.3% for 3 columns).

Regards,

Nikola Boychev

User Gravatar

NBoychev

Posted Jul 2 2014 23:12 UTC

You can't have always three columns. On mobile, it wont work. So bootstrap classes will help here.

Change li class from span3 to span4 and remove CSS

media="all"
@media only screen and (min-width: 1600px)
.row.row-set > [class*="span"] {
    width: 19.98%;
}

And other media queries for .row.row-set > [class*="span"] unless you need some exceptions ofcourse.

User Gravatar

renekorss

Posted Jul 2 2014 23:13 UTC

Solution

This didn't solve your task? Get your own custom solution.

Try setting column width to $container.width() / 3

masonry: {
  columnWidth: $container.width() / 3
}
User Gravatar

Remmy

Posted Jul 2 2014 23:28 UTC

@remmy - setting the column width didnt work for me. here's a link to the pl.masonic.js. I also tried to hardcode the width 346 instead of calculating it with the container widht. still no go.

User Gravatar

jp

Posted Jul 3 2014 0:36 UTC

@nikola - I included a link to pl.masonic.js which calls isotope function, will that help you.

User Gravatar

jp

Posted Jul 3 2014 0:39 UTC

@renekorss - it took a while but I found where the @media screen.. were defined. it gets compiled from .less into .css during design mode. nevertheless, I removed the media settings as you suggested, went back to the designer and force it to recompile and it worked! awesome! thanks - I posted this issue at pagelines forums and for days no one was able to answer it. thanks!

User Gravatar

jp

Posted Jul 3 2014 1:28 UTC

@jp - Thank you for reward! Glad to help. Did you test it on some other location? I'm not seeing it on dev nxgencapital com right now.

User Gravatar

renekorss

Posted Jul 3 2014 1:34 UTC

it's in demo nxgencapital com, but I just applied to the main site and it's not setting, either it's not recompiling or it's cacheing the css. I'll try on another computer.

User Gravatar

jp

Posted Jul 3 2014 1:38 UTC

Yes, it's not recompiling. I made hard refresh to compiled-css-core-1404192141.css and no change. Try to recompile then :) Demo works great!

User Gravatar

renekorss

Posted Jul 3 2014 1:41 UTC

I compared the 2 compiled css on both sites and they are the same. both also has @media min-width 900 and max-width 1300. should I remove those as well?

User Gravatar

jp

Posted Jul 3 2014 2:07 UTC

Yes. You don't need those media queries. And those files are not same.You need to remove widths from those media queries. And recompile.

User Gravatar

renekorss

Posted Jul 3 2014 2:13 UTC

I've been removing the whole media section instead of removing the width. there's not manual compile in the designer, i have to make a change to page and save, hoping the change would be big enough for it to recompile. I ended up exporting the settings from demo to the main site and that seems to work. I've tried on another computer and it does show, can you do me a favor and confirm on your side too? thanks

User Gravatar

jp

Posted Jul 3 2014 2:27 UTC

It dosen't work on dev nxgencapital com for me. On demo site it's okay.

User Gravatar

renekorss

Posted Jul 3 2014 3:04 UTC

it's not on dev, i applied changes on www - thx

User Gravatar

jp

Posted Jul 3 2014 12:46 UTC

Add a reply

By posting a reply on CodersClan you agree to our Terms & Conditions