Margins for masonry grid loading delay on mobile

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

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

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

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.

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

Best regards,
Ismael

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

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

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

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

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.

Best regards,
Ismael

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