Black Friday sale! Get 25% off WPSP Pro! Discount automatically applied at checkout.

[Resolved] Content Reflow

Please login to receive premium support.

Support for the free plugin can be found here.

Home Forums Pro Support Content Reflow

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #19966
    Timothy
    Participant

    Hi Tom and team,

    I have a question about what I think is referred to as “content reflow” – I’m no expert, though.

    I’m finding that if a user scrolls down a page that has a WP Show Posts list on it, the page jumps back to the top once the page is fully loaded. This only seems to happen if the list uses featured images.

    You can see an example of this issue on this page: https://www.academicenglishco.com/

    It’s only noticeable on mobile devices because there is not enough on the page to make scrolling necessary/possible on a desktop.

    Is there any way to avoid this? Could it be related to WP Rocket settings (combining js files, etc.)?

    Many thanks in advance,
    Tim

    #20040
    Tom
    Keymaster

    Hi there,

    I’m not sure if I’m seeing the issue. However, I’m seeing that you’re using Masonry, which uses javascript. It could cause some weirdness like this possibly – does the issue go away if you turn that option off?

    #20070
    Timothy
    Participant

    Hi Tom,

    Thanks for your reply.

    Yes, turning off Masonry has definitely fixed the issue. The reason I originally turned Masonry on was not so much for the look, but because another issue I was having seemed to be fixed by having Masonry switched on. It’s obviously not a major issue, but on mobile, if the page loads in portrait mode, the featured images don’t seem to expand to fill the container if you turn the device to landscape mode. Would I need a larger image size to make sure they expand (current 900 px), or is there a code snippet I could add to force them to expand?

    I hope that makes sense.

    Many thanks,
    Tim

    #20215
    David Beckwith
    Participant

    Hi there,

    try adding this CSS:

    .wp-show-posts-columns .wp-show-posts-single:not(.wp-show-posts-masonry-block) .wp-show-posts-image img {
        object-fit: unset !important;
    }
    #20262
    Timothy
    Participant

    Hi David,

    Awesome – thank you! That’s done the trick.

    Thanks again for the support.

    Tim

    #20312
    David Beckwith
    Participant

    Glad to be of help,

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.