Margins for masonry grid loading delay on mobile - Support | Kriesi.at

Tagged: bottom margin delay, masonry grid, mobile

Viewing 14 posts - 1 through 14 (of 14 total)

Author

Posts
September 11, 2025 at 2:08 pm #1489162
pelgrimrat
Participant
Dear people of the support forum,

I am having an issue on this page (and also on other pages with a masonry grid layout):

Agenda

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 #1489163

pelgrimrat
Participant

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

September 12, 2025 at 5:23 am #1489177

Ismael
Moderator

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.

Best regards,
Ismael

September 12, 2025 at 11:00 am #1489187

pelgrimrat
Participant

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

September 12, 2025 at 2:56 pm #1489193

pelgrimrat
Participant

I just added a third screenshot yo the shared folder.

I changed a post slider to a masonary grid on this page:

Nieuws

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 #1489230
Mike
Moderator
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
September 29, 2025 at 10:58 am #1489640

pelgrimrat
Participant

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?

September 30, 2025 at 7:08 am #1489675
Ismael
Moderator
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
September 30, 2025 at 10:12 am #1489683

pelgrimrat
Participant

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

October 1, 2025 at 5:36 am #1489706

Ismael
Moderator

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

October 1, 2025 at 5:39 pm #1489726

pelgrimrat
Participant

login credentials in private content

October 2, 2025 at 7:17 am #1489739

Ismael
Moderator

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

October 2, 2025 at 3:19 pm #1489771

pelgrimrat
Participant

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.

October 3, 2025 at 6:42 am #1489791
Ismael
Moderator
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
Author

Posts

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.