-
Posts
-
Hello Enfold Team,
I open a previous ticket for this same issue: #1411519
“I am using your “flexible Masonry” setting with a “large gap,” but I am having a problem with the alignment of the images. Specifically, my page has two 4:3 ratio photos stacked next to a 2:3 ratio image. However, the 2:3 image is not accounting for the 15px gap in the middle of the 4:3 images, so it is 15px shorter than the two 4:3 images…
Mike then provided the following fix:
try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:function custom_script() { ?>
<script>
(function($) {
$(‘#av-masonry-2-item-3398 img’).height($(‘#av-masonry-2-item-3398 img’).height() + 15);
$(‘#av-masonry-1-item-3400 img’).height($(‘#av-masonry-1-item-3400 img’).height() + 15);
}(jQuery));
</script>
<?php
}
add_action(‘wp_footer’, ‘custom_script’);This worked, but unfortunately, only on that page… I have cleared all cache but no dice.
It works here:
https://jamesj100.sg-host.com/lighthouse/But not here:
https://jamesj100.sg-host.com/nmo-winrock/Thanks as always for your help.
-James
Hey James,
Thanks for your patience, the solution works for specific items, you can add more items by duplicating the last line in the code and add a new masonry item number like this replacing the “X”s:function custom_script() { ?> <script> (function($) { $('#av-masonry-2-item-3398 img').height($('#av-masonry-2-item-3398 img').height() + 15); $('#av-masonry-1-item-3400 img').height($('#av-masonry-1-item-3400 img').height() + 15); $('#av-masonry-x-item-xxxx img').height($('#av-masonry-x-item-xxxx img').height() + 15); }(jQuery)); </script> <?php } add_action('wp_footer', 'custom_script');The link above to your not working page is not working, so if your not sure how to find the item number please include a new link.
Best regards,
MikeHey Mike,
Thank you for your continued support with this. I do not know how to obtain the item number, so I would greatly appreciate instructions on how to get this info. I have a couple pages that I need to fix this on, and this will be an ongoing issue for this client:
https://jamesj100.sg-host.com/new-mexico-orthopaedics/
https://jamesj100.sg-host.com/century-bank/Do you all consider this a bug? If so, is it on the roadmap to be fixed? I’m concerned that in future updates, this will break…
-James
OK, Just kidding. I was able to find it using the browser inspect function and updated the code you provided. It would still be good to know if this is on the roadmap for a future fix.
Thanks again!
You guys are amazing.
Hi,
Glad to hear that you have this sorted out, I see this as an unexpected combination which I found no other references to. The solution that I came up with needs to be applied to only certain items in only a combination of a certain situations. I believe that this would be better handled on a per case basis with the above script manually.
We see many unique situations that we adjust with tweaks, but it would not be practical to add each tweak to the theme as it would be too much, I hope this makes sense.
We will close this thread as you asked, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.Best regards,
Mike
- The topic ‘Masonry gallery alignment issue’ is closed to new replies.