Home>Support>Problem with Masonry layout

Problem with Masonry layout

I’m trying to setup a widget on our sites frontpage which displays our posts as stunningly as on the demo. However i kan’t get rid of the black margin next to images (only top and left, like the images slips down and right from the box)

I also can’t seem to keep the images inside a square as some will stickout or leave empty space.

Please help!

I have tried to uninstall and reinstall as well as thumbnails regenerate…

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 7 years, 9 months ago anderskiel

    ok i worked out the first part of the problem. my theme had some css applying border and reducing size of images…

    now for the second part. if i have some high (1×2) or wide (2×1) images in the grid i sometimes get a bit sticking outside the square of the grid.. can i some how avoid that and use random sorting?

    Thanks for any help.

  2. 7 years, 9 months ago Andrew Misplon Hi, I Work Here

    Hi anderskiel

    Thanks for giving Masonry a try.

    There can be conflicts between a theme’s CSS and the plugin. Can you please send through a link to a Masonry page on your site and I’ll take a look.

    For reference purposes our Masonry documentation can be found here: https://siteorigin.com/masonry-plugin-documentation/.

  3. 7 years, 9 months ago anderskiel

    Hi Andrew,
    Thanks so much for your quick reply.

    i have gone through the documentation, but i cant find anything about the if the plugin will actually control the masonry to stay with in a square.

    The masonry is running on http://www.sabinasverden.com but is currently set up with order of pictures to stay with in the square. however if i turn on the random sort order on it will some times have one of the long pictures sticking out at the bottom or leaving empty spaces.

    looking forward to hear from you

    kind regards
    Anders

  4. 7 years, 9 months ago Andrew Misplon Hi, I Work Here

    Thanks for sending. Please could you create a demo page for us with the error replicated so we can take look. The error that appears when you use random order.

  5. 7 years, 9 months ago anderskiel

    Thanks for the support Andrew!

    i’ve setup a demo page with the problem here:

    http://sabinasverden.com/testside/

    Thanks again..

  6. 7 years, 9 months ago Andrew Misplon Hi, I Work Here

    No problem.

    Is the widget on the test page perhaps set to show 10 posts while the widget on the home page is set to show twelve posts?

  7. 7 years, 9 months ago anderskiel

    No number has been specified, but even if I set it to 12 posts ( or any number fitting 4 columns) it Will still leave empty spaces or stick tall image out of the square when order is random.

    Thanks for all your help.

    Anders

  8. 7 years, 9 months ago Andrew Misplon Hi, I Work Here

    Is the demo page perhaps set to a post category that only has 10 posts?

  9. 7 years, 9 months ago anderskiel

    sorry for the long wait, but i thought i had replied already.

    both the front page and the test page are setup exactly the same exempt from the test page orders by Random and the front page by none. I’ve set both to display 12 posts. It helps a little on the random order, but if you refresh 5-10 times i’m sure you’ll see the problem again.

    Thanks for any help with this.

    Anders

  10. 7 years, 9 months ago Andrew Misplon Hi, I Work Here

    I think this has to do with block size consistency. Each post has the option to set block size in the right column Masonry drop down menu. When the test page area is fully covered it’s because this post is being loaded: http://www.sabinasverden.com/ideer-til-en-kreativ-soendag/ and perhaps another combination. When random ordering drops that post there is a gap. I’d guess that if you had all your posts set to the same block size this wouldn’t happen. So just a trade off, either fill the space but use the same block size OR occasionally not fill the space but get to use different block sizes.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More