Tagged: bottom margin delay, masonry grid, mobile
-
AuthorPosts
-
September 11, 2025 at 2:08 pm #1489162
Dear people of the support forum,
I am having an issue on this page (and also on other pages with a masonry grid layout):
On mobile, the bottom margins only load after a delay. I’m not sure how long it takes. They seem to load after scrolling un and down a couple of times. The frames containing the post previews are pushed against eachother, before the bottom margins kick in. Obviosly, I would like the margins to load upon loading the page instantly.
I have set the margin with this code:
@media only screen and (max-width: 767px) { #top .av-masonry .av-masonry-entry { width: 96% !important; margin-right: 0% !important; margin-bottom: 30px !important; } }How can this be fixed?
Thanks so much in advance!
September 11, 2025 at 2:12 pm #1489163Sorry, forgot to check Notify me of follow-up replies via email
September 12, 2025 at 5:23 am #1489177Hi,
Thank you for the inquiry.
The masonry element seems to be loading correctly on our end. Would you mind providing a screenshot of the issue? You can use platforms like Savvyify, ImgBB, PostImages, or Dropbox to upload and share the screenshot.
Best regards,
IsmaelSeptember 12, 2025 at 11:00 am #1489187Hi Ismael,
Thanks you for your reply.
The problem only occurs on mobile.September 12, 2025 at 2:56 pm #1489193I just added a third screenshot yo the shared folder.
I changed a post slider to a masonary grid on this page:
The bottom margin of each post preview isn’t loading, see screenshot 3.
Funny thing is, when I click on it with the inspector tool in Chrome, the margins adjust to the correct size.
September 14, 2025 at 10:09 pm #1489230Hi,
Thanks for your patience, the reason this is occuring is becuse you have a script adding the read more links:(function($){ $(window).on('av-height-change', function() { $('.av-masonry:not([class*="-gallery"]) .av-masonry-entry').each(function() { var more = $(this).find('.av-masonry-read-more'); var cont = $(this).find('.av-masonry-entry-content'); if( more.length == 1 ) return; cont.append('<div class="av-masonry-read-more">Lees meer ></div>'); }); }); })(jQuery);they are added after the page load and the masonry has set the abosulte item heights, which is used in the grid placement, thus the 36px height of the read more offsets the 30px margin bottom, so you have no space. This is also occuring on the desktop version, there you have set a 70px bottom margin, but after the read more is added the space looks about 30px, you probly didn’t notice.
So the solution is to change your custom css for mobile frommargin-bottom: 30px !important;tomargin-bottom: 70px !important;Best regards,
MikeSeptember 29, 2025 at 10:58 am #1489640Hello Mike,
Thank you for your reply.
Your solution makes the margins slihjtly better on mobile, but they still move around after all elements are properly loaded.
Is there a solution available in which the margins are good right away?September 30, 2025 at 7:08 am #1489675Hi,
Thank you for the update.
What happens when you add this script in the functions.php file?
add_action('wp_footer', 'ava_auto_resize'); function ava_auto_resize() { if (!is_page(703)) { return; } ?> <script> (function($) { var resizeInterval = setInterval(function() { $(window).trigger('resize'); }, 1500); $(window).on('load', function() { clearInterval(resizeInterval); }); })(jQuery); </script> <?php }Please make sure to purge the cache before checking the page.
Best regards,
IsmaelSeptember 30, 2025 at 10:12 am #1489683Thank you Ismael, but that didn’t change anything.
Just to be extra clear what the issue is. When viewed on mobile:
1. first, the margins appear in the correct size
2. after a second or 2, a Read More line appears underneath each summary, thinning the margins to very narrow
3. after scrolling down and up, the margins widen to the desired with.Ideally, all these steps should happen instanly when loading the page (as it does on the desktop version).
October 1, 2025 at 5:36 am #1489706Hi,
We may need to log in to the site to properly inspect the issue. Please provide the login details in the private field.
Best regards,
IsmaelOctober 1, 2025 at 5:39 pm #1489726login credentials in private content
October 2, 2025 at 7:17 am #1489739Hi,
Thank you for the login info.
We re-added the ava_auto_resize script in the functions.php file and adjusted the ID value in the is_page function so that the script runs on the homepage. This seems to have resolved the issue with the masonry layout as shown in the screenshot below.
Please make sure to purge the cache before checking the page, or switch to incognito mode. Let us know the result.
Best regards,
IsmaelOctober 2, 2025 at 3:19 pm #1489771I don’t see any difference.
I provided new screenshots on Dropbox.
The link is in the private content.Again, my goal is that there is no delay in the steps 1 – 3 happening on the page.
October 3, 2025 at 6:42 am #1489791Hi,
Thank you for the screenshots.
We’re not really seeing Step 1, but for Step 3, try to look for the following css code and adjust the value from 50px to 20px.
.av-masonry-entry { margin-bottom: 50px !important; }Set the margin-bottom value to 20px, then purge the cache before testing the page.
Best regards,
IsmaelOctober 9, 2025 at 12:17 pm #1489980Hi Ismael,
I have tried this, but this doesn’t change anything to the delay in how the layout is shown on the frontend.
Maybe we can try something else?
The reason that the extra JS code is added in the functions.php is that, without it, an unwanted extra “block” is added to the masonry grid layout. All the way at the beginning, an empty block is displayed.
Maybe if you know the solution to that problem, the extra JS code doesn’t need to be added and the other problem (delay in displaying the correct layout) will be solved as well!October 10, 2025 at 7:39 am #1490007Hi,
Thank you for the info.
an unwanted extra “block” is added to the masonry grid layout. All the way at the beginning, an empty block is displayed.
Which additional JS or script were you referring to? The script that @Mike provided appends a “read more” link to the masonry items, and the other triggers a resize event during page load to make sure the masonry repositions correctly. Could you provide a screenshot of the “extra block”?
Best regards,
IsmaelOctober 10, 2025 at 10:02 am #1490012This is the code in the functions.php which I am referring to:
// Verwijder lege masonry items (zonder afbeelding) en herbereken de layout function regenboog_fix_empty_masonry_items() { ?> <script type="text/javascript"> jQuery(document).ready(function($){ var $container = $('.av-masonry'); if ($container.length) { // Loop door alle masonry entries $container.find('.av-masonry-entry').each(function() { // Als er geen afbeelding in de entry staat, verwijderen if ($(this).find('img').length === 0) { $(this).remove(); } }); // Na een kleine vertraging Masonry opnieuw laten rekenen // setTimeout(function() { // $container.isotope('layout'); // }, 300); } }); </script> <?php } add_action('wp_footer', 'regenboog_fix_empty_masonry_items', 100);When I remove this piece of code, the masonry grid looks like the screenshot in the Dropbox (link in Private Content)
October 13, 2025 at 7:47 am #1490092Hi,
Thank you for the info.
We disabled the script and added this code in the Quick CSS field to hide the empty masonry item without an image.
#top .av-memr40p2-4e918060ab6ff669ef638e6ba94ae4db .av-masonry-container .av-masonry-entry:first-child { display: none !important; }Best regards,
IsmaelOctober 13, 2025 at 12:28 pm #1490124Hi Ismael,
This only seems to hide the empy item om the “News” page (https://regenboogalliantie.nl/nieuws/)
The same issue is visible in the masonry element on the page https://regenboogalliantie.nl/nieuws/
And twice on the homepage.
Can you also generate the CSS code to hide the empty block at the other 3 locations?Thanks in advance.
In addition: unfortunately, removing the script from functions.php didn’t solve the original issue on mobile. The “read more” text and correct margins are still added with a delay.
October 14, 2025 at 6:10 am #1490160Hi,
This only seems to hide the empy item om the “News” page (https://regenboogalliantie.nl/nieuws/)
The same issue is visible in the masonry element on the page https://regenboogalliantie.nl/nieuws/The links above look the same. Can you provide the correct link to the other page? For the home page, you can add this css code:
#top .av-mfb8b6h9-903a18144fa2874ec5abc87835770ec5 .av-masonry-container .av-masonry-entry:first-child, #top .av-mfgqr9vd-8ed003c43d554c716ccad992e0119c66 .av-masonry-container .av-masonry-entry:first-child { display: none !important; }If you’re planning to add more Masonry elements in the future, go to Advanced > Developer Settings, add a Custom CSS Class name “av-masonry-no-empty-items”, then add this css code:
#top .av-masonry-no-empty-items .av-masonry-container .av-masonry-entry:first-child { display: none !important; }For the read more link, try to replace the previous script with this:
(function($){ $(document).ready(function() { $('.av-masonry:not([class*="-gallery"]) .av-masonry-entry').each(function() { var more = $(this).find('.av-masonry-read-more'); var cont = $(this).find('.av-masonry-entry-content'); if (more.length == 1) return; cont.append('<div class="av-masonry-read-more">Lees meer ></div>'); }); $(window).trigger('resize av-height-change'); }); })(jQuery);Best regards,
IsmaelOctober 14, 2025 at 3:20 pm #1490204Hi Ismael,
Thanks again.
I added the CSS code snippets and the unwanted extra blocks are gone. Nice!
I also replaced the bit of code in mij functions.php.
On mobile, the correct layout (added Read More texts and correct spacing between masonry brick) still has a delay in loading, around 5 seconds, depending if you are scrolling or not.
The delay seems to be a bit less than before, so that’s very good.Can you please have a look at my entire functions.php file? Maybe there is some code that could be removed or replaced by something better?
I have previously provided login details.
Thanks in advance!October 16, 2025 at 7:35 am #1490273October 17, 2025 at 1:47 pm #1490349Yes, you solved the problem!
Thank you so much for all your time and effort!This topic can be marked as resolved.
October 17, 2025 at 9:21 pm #1490358Hi,
Glad that Ismael could help, if you have further questions please open a new thread and we will try to help. Thanks for using Enfold.Best regards,
Mike -
AuthorPosts
- The topic ‘Margins for masonry grid loading delay on mobile’ is closed to new replies.



