Docs

[Scot B]

Hi I have a strange/interesting css problem on a gallery page
https://www.devon.photography/client-gallery/kingsbridge-food-music-2016/

I have already had the plugin developer login and have a look and they came back with
“This appears to be theme related and possibly just with the full page layout page template(s) … testing with standard layouts appears to be fine as well as with default WordPress Twenty series themes.

There is also the possibility of a conflict with Cornerstone but in my testing it does not appear to be a factor in this particular instance.

It might be better to work with the theme author to see if they can recommend how to insure that the full page layout remains constant with it width.

Thanks!”
to replicate the problem, go to the link above.. click and image, then open the shopping cart. close the lightbox and the gallery now displays 3.5 columns instead of 3.

I will add a link to a video demonstration and some screenshots that may help

[Scot B]

This reply has been marked as private.

[Rad]

Hi there,

Thanks for writing in.

I’m not able to reproduce this on my end. But I can see that the issue is about re-rendering of the items. It’s when the dimension changes, it need to recalculate positioning and element size which didn’t happen after you close it.

It’s not X theme or cornerstone related, and I can verify it even on your screenshot. Example, ngg-pro-masonry dimension was 904px then becomes 1206px and it’s not part of cornerstone’s element. It’s the class name used by the plugin. The issue is that, when the dimension change, it never re-calculate the element sizing and positioning.

Please try this, add this CSS to Admin > Appearance > Customizer > Custom > CSS

.ngg-pro-masonry {
width: 100% !important;
}

That may not work, what if items are calculating the positioning and dimension based on 904px regardless of container’s size? The question is, where did it get the 904px since X’s section is wider?

Thanks!

[Scot B]

Thanks for the reply and advice. I have tried the css provided and that didn’t work as it left aligned the gallery and also still showed the same problem

I did try adjusting the css to

.ngg-pro-masonry {
max-width: 904px !important;
}

and that appears to work! so thank you for pointing me in the right direction

[Prasant Rai]

Happy to hear that. Feel free to ask us again. Have a great day! 🙂

[Author]

Posts