Viewing 24 posts - 1 through 24 (of 24 total)
  • Author
    Posts
  • #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!

    #1489163

    Sorry, forgot to check Notify me of follow-up replies via email

    #1489177

    Hi,

    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.

    www-maartenwebsites-nl-dev-regenboog-agenda-i-Pad-Air

    Best regards,
    Ismael

    #1489187

    Hi Ismael,

    Thanks you for your reply.
    The problem only occurs on mobile.

    Screenshots:
    https://www.dropbox.com/scl/fo/h32rjqzzqhqxirtk0ogxz/AEun7b_7b8G36hsp0lD69Bo?rlkey=q4gzrvzabacnt6qgr587r2i0b&st=xul5mhls&dl=0

    #1489193

    I 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.

    #1489230

    Hi,
    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 from margin-bottom: 30px !important; to margin-bottom: 70px !important;

    Best regards,
    Mike

    #1489640

    Hello 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?

    #1489675

    Hi,

    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,
    Ismael

    #1489683

    Thank 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).

    #1489706

    Hi,

    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,
    Ismael

    #1489726

    login credentials in private content

    #1489739

    Hi,

    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.

    Screenshot-2025-10-02-at-1-14-49-PM

    Please make sure to purge the cache before checking the page, or switch to incognito mode. Let us know the result.

    Best regards,
    Ismael

    #1489771

    I 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.

    #1489791

    Hi,

    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,
    Ismael

    #1489980

    Hi 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!

    #1490007

    Hi,

    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,
    Ismael

    #1490012

    This 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)

    #1490092

    Hi,

    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,
    Ismael

    #1490124

    Hi 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.

    #1490160

    Hi,

    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,
    Ismael

    #1490204

    Hi 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!

    #1490273

    Hi,

    The script that appends the “read more” link was duplicated. We removed the duplicate and fixed the latest modification. Please let us know if it works on your end.

    Screenshot-2025-10-16-at-1-34-34-PM

    Best regards,
    Ismael

    #1490349

    Yes, you solved the problem!
    Thank you so much for all your time and effort!

    This topic can be marked as resolved.

    #1490358

    Hi,
    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

Viewing 24 posts - 1 through 24 (of 24 total)
  • The topic ‘Margins for masonry grid loading delay on mobile’ is closed to new replies.