Jump to content

Archived

This topic is now archived and is closed to further replies.

circ2013

Spacing issue in Masonic Grid Rows

Recommended Posts

circ2013

Hello Everyone,

 

I am having an issue where the first 3 or 4 rows of my masonic grid are spaced correctly, but then when I scroll down to the last few, the spacing between the rows appear to be at least double.  At first, I thought I had an image sized wrong, but I have checked and they are all the same size.

 

It corrects itself if I resize my window, but I would prefer it to load consistently every time.

 

Attached is a screenshot and here is a link to my dev site.  http://knssandbox.com/beck2014/portfolio-of-custom-built-homes-and-renovations/

 

Any help is greatly appreciated.  I have inspected this several times in Firebug..., but I am not finding anything that could be causing this.  I have made several css update to hide things and force the page to only load a max of 4 columns...  However, I was seeing this prior to that css change as well.

 

Could I set a max-height to the row or to images or something to prevent this?

 

Thanks,

Scott

Share this post


Link to post
Share on other sites
Danny

Hi,

 

As far as I can tell, your issue is likely related to the that fact that your images are just way to big. You will probably want to reduce to the dimensions, as far as I can tell, due to their be so many images being loaded and the fact that they're being reduced by over 50% is likely causing a calculation issue. Try reducing the images dimensions and see if this helps.

I will also speak to our developers and see if there is anything we can do.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
circ2013

Ok, I tried what you suggested and re-uploaded all 'featured images' at 400x200 (the originals were 1000x500) and I am still having the same issues here.

 

Let me know what the developers come back with. 

 

Thanks,

Scott

Share this post


Link to post
Share on other sites
circ2013

Hi Danny,

 

I think I figured out what my issue was, but unfortunately, it means that I may not be able to do what I was trying to do.

 

I wanted the page to never show more than 4 columns across so I added the following to my style sheet

 

 .row.row-set > [class*="span"] {
    width: 24%;

 

It appeard to solve the Column issue, but introduced the spacing issue within the Rows.

 

So, can you think of any other way to accommodate the look and feel of the design and limit the page to maximum of 4 columns accross?

 

Thanks again,

Scott

Share this post


Link to post
Share on other sites
circ2013

I may have spoken too soon.  now that I have refreshed the page and cleared the cache, it looks like my issue with the filtering to 'Renovations' is fixed, but I still occassionally get the issue with the spacing between the rows.

 

Could this be a result of the tool initially being built to support a max of 20 items.  I have updated the my functions.php file in my child theme with the following:

 

add_filter( 'pl_opt-masonic_total', function() { return 40; } );

 

Thanks,

Scott

Share this post


Link to post
Share on other sites
circ2013

Disabled Lazyload.js and the issue is gone, but now I don't get the lazyload benefits.

Share this post


Link to post
Share on other sites
Danny

Unfortunately, your issue is caused by custom code you have added yourself. Therefore, I am unable to report this as a bug due to it being caused by custom code.

 

However, you could try using this plugin and see if this works without the spacing issue.

 

https://wordpress.org/plugins/bj-lazy-load/


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
circ2013

No Worries, I think I have gotten this somewhat figured out.  Out of curiosity, is add "add_filter( 'pl_opt-masonic_total', function() { return 40; } );" what you are considering custom code? or is it some of the style changes?

 

Thanks again,

Scott

Share this post


Link to post
Share on other sites
Danny

We consider any kind of code added by a user not provided by a PageLines staff member as custom code and therefore, if you have issues with your custom code the best method to get support is to use a resource such as a CSS specific forum or a PHP specific forum.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

  • Similar Content

    • stijnxo
      By stijnxo+
      The Filtering of categories in the Masonic Gallery refreshes back to ALL categories when the DMS Revslider loads a new image?
      Anybody any idea? See Artists Category refreshes back to ALL when the DMS Revslider with images on the top loads a news image on http://www.18hrsfestival.nl/
    • Susan
      By Susan+
      I have three items in my Masonic section. I would like them to center on the page. Here is the page on my staging site. What is the CSS code to do this? I don't see another option to handle this.
      Thank you.
       
       
    • Susan
      By Susan+
      Please tell me how to remove the date on hover from the Masonic section. The dummy for this page is here.
      An older post here showed the following for it (below) but it does not work (anymore?).
      #site .pl-center-cell .metabar { display: none; } Thank you.
       
       
    • MissT
      By MissT+
      Hi there, the Filter By option within the Masonic section isn't working when a custom post type and custom category is selected.  If you swap to normal posts and categories then it works but sadly not with custom post types and custom categories.
      All posts are shown but when you click on the categories all posts disappear even though posts do have these categories. When you click All all the posts come back. I've tried this on two different websites with the same result.
      Many thanks in advance.
    • Lisa Haran
      By Lisa Haran+
      Hi 
      I have a map here http://www.iloveoffset.com/maps/
      I want to add several pointer locations to the map, but when I do they do not appear.
      On this map there are 2 pointer locations and as you can there is only one visible.
      Earlier today I added 7 and could only see 4 so there is something odd going on.
      My theme is up to date
×