Inconsistent Display

Hi @mark_l_sanders,
Thanks for your post.

This might be the cache issue. try to clear the cache and disable it if you’re using any cache plugin.
If the issue still exists kindly share a live URL so that we can investigate. or you can directly share the project to our support email [email protected]

Hi Azizul
We’re not using any caching plugins; I’ve opened the site temporarily – I’d be really grateful if you could take a look.
The best URL to look at is: https://blogs.salford.ac.uk/degree-show-development/courses/animation/.

There should be 10 items in the grid; when the ‘problem’ occurs, only 3 or 4 are displayed. I cannot provide a repeatable way of seeing this issue.
(By the way, we are premium licence holders.)

Many thanks.

I’ve uploaded a screenshot of the problem at https://ibb.co/sqLd4Mq.

I’ve looked in Dev Tools: all the items correctly appear in the DOM, but some have no height or width, so do not display.

Here is code for a visible item:

<div class="item item-303 skin flat even 0 ">
                <div class="layer-wrapper layout-256">
                <div class="layer-media element_1587187627902" id="">
        <div class="element element_1587190790308  element-media ">
        <a target="_self" href="https://blogs.salford.ac.uk/degree-show-development/animation/aj-gill/"><img width="580" height="387" src="https://blogs.salford.ac.uk/degree-show-development/wp-content/uploads/sites/89/2022/05/chris-chow-JAZfQZRNYvE-unsplash-copy-1024x683.jpeg" class="attachment-large size-large wp-post-image" alt="" loading="lazy" srcset="https://blogs.salford.ac.uk/degree-show-development/wp-content/uploads/sites/89/2022/05/chris-chow-JAZfQZRNYvE-unsplash-copy-1024x683.jpeg 1024w, https://blogs.salford.ac.uk/degree-show-development/wp-content/uploads/sites/89/2022/05/chris-chow-JAZfQZRNYvE-unsplash-copy-300x200.jpeg 300w, https://blogs.salford.ac.uk/degree-show-development/wp-content/uploads/sites/89/2022/05/chris-chow-JAZfQZRNYvE-unsplash-copy-768x512.jpeg 768w, https://blogs.salford.ac.uk/degree-show-development/wp-content/uploads/sites/89/2022/05/chris-chow-JAZfQZRNYvE-unsplash-copy-1200x800.jpeg 1200w, https://blogs.salford.ac.uk/degree-show-development/wp-content/uploads/sites/89/2022/05/chris-chow-JAZfQZRNYvE-unsplash-copy.jpeg 1500w" sizes="(max-width: 580px) 100vw, 580px"></a>

    </div>
        </div>
        <div class="layer-content element_1587187714568" id="">
        <div class="element element_1587187895341  title ">
                    <a target="_blank" href="https://blogs.salford.ac.uk/degree-show-development/animation/aj-gill/">AJ Gill</a>

		

    </div>
        </div>
            </div>
    </div>

Here is code for an INVISIBLE item:

<div class="item item-304 skin flat even 6 ">
                <div class="layer-wrapper layout-256">
                <div class="layer-media element_1587187627902" id="">
        <div class="element element_1587190790308  element-media ">
        <a target="_self" href="https://blogs.salford.ac.uk/degree-show-development/animation/john-ogroats/"><img width="580" height="580" src="https://blogs.salford.ac.uk/degree-show-development/wp-content/uploads/sites/89/2022/05/joshua-j-cotten-0eRFFHUYvEY-unsplash-1024x1024.jpeg" class="attachment-large size-large wp-post-image" alt="" loading="lazy" srcset="https://blogs.salford.ac.uk/degree-show-development/wp-content/uploads/sites/89/2022/05/joshua-j-cotten-0eRFFHUYvEY-unsplash-1024x1024.jpeg 1024w, https://blogs.salford.ac.uk/degree-show-development/wp-content/uploads/sites/89/2022/05/joshua-j-cotten-0eRFFHUYvEY-unsplash-300x300.jpeg 300w, https://blogs.salford.ac.uk/degree-show-development/wp-content/uploads/sites/89/2022/05/joshua-j-cotten-0eRFFHUYvEY-unsplash-150x150.jpeg 150w, https://blogs.salford.ac.uk/degree-show-development/wp-content/uploads/sites/89/2022/05/joshua-j-cotten-0eRFFHUYvEY-unsplash-768x768.jpeg 768w, https://blogs.salford.ac.uk/degree-show-development/wp-content/uploads/sites/89/2022/05/joshua-j-cotten-0eRFFHUYvEY-unsplash-1200x1200.jpeg 1200w, https://blogs.salford.ac.uk/degree-show-development/wp-content/uploads/sites/89/2022/05/joshua-j-cotten-0eRFFHUYvEY-unsplash.jpeg 1500w" sizes="(max-width: 580px) 100vw, 580px"></a>

    </div>
        </div>
        <div class="layer-content element_1587187714568" id="">
        <div class="element element_1587187895341  title ">
                    <a target="_blank" href="https://blogs.salford.ac.uk/degree-show-development/animation/john-ogroats/">John O'Groats</a>

		

    </div>
        </div>
            </div>
    </div>

Hi Azizul
Posted details and code, but the update has been held for moderation (maybe coz I included an image link and code).

Summary – all items are present in the DOM, but invisible items are not getting a height. The wrapper element (div with classes of item, item-<number>,skin-flat, odd 1> is still set to height: auto, but has no computed height.

thanks

Let me try again: screenshot of item: I’ve uploaded a screenshot of the problem at https://ibb.co/sqLd4Mq.

Code of visible/invisible items can be viewed at https://pastebin.com/fVLyhKNb

I wonder if the problem is connected with the default grid settings…what would you recommend? Our posts have different thumbnails sizes, which complicates things.

If I use percentages, the order is better, but then there are large gaps between items; if I then enable Masonry, the items overlap too often at different screen sizes.

• This reply was modified 2 years, 10 months ago by mark_l_sanders.

Don’t worry. Thanks for the suggestion but I’ve switched to The Post Grid. More reliable I think.