Masonry post grid shows blank spots

Home Forums Jevelin Theme Masonry post grid shows blank spots

Home Forums Jevelin Theme Masonry post grid shows blank spots

Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    RESOLVED Posts
  • theathleteblog
    Participant

    Hi there,

    after a recent Jevelin theme update I noticed that the masonry blog layout that I have on my archive pages started to behave strangely. In particular, on some pages it would display blank spots and shift posts to a next row, even though I have a 3 column grid with 9 posts in total – on main blog page and most of other archive pages it seems to show that normally.

    Here are a couple of pages that I noticed such behavior:

    1. here the last row of posts is split into two (1 on one row and 2 on another) – https://theathleteblog.com/resources/training-tips/
    2. here I have 7 posts in total (so not a full page and no pagination), however row 2 shows 2 posts on the right and row 3 shows 2 posts on the left) – https://theathleteblog.com/resources/training-tips/

    There are more examples on my categories page, but these seem the most vivid. I also attach a screenshot so that you can see the issue I’m having.

    Is it possible to setup masonry so that all posts are ‘aligned to the left’ and there are no blank spots like the ones described?

     

    Thanks and best regards,

    Andrejs

    Attachments:
    You must be logged in to view attached files.

    Hi Andrejs,

     

    I hope you are well today and thank you for your question.

     

    Could you please try clearing and temporarily deactivating the W3 Total Cache and autoptimize cache plugins on your website?

     

    Best regards,
    Shufflehound team

    theathleteblog
    Participant

    Hi,

    I cleared all caches and then deactivated both Autoptimize and W3 Total Cache, as you suggested. However, the result was exactly the same – there were blank spots just like on this page.

    Now I’ve activated both of them back.

     

    Best regards,

    Andrejs

    Could you please again temporarily deactivate the W3 Total Cache and autoptimize cache plugins on your website so that I can troubleshoot it?

    theathleteblog
    Participant

    I just did, please troubleshoot

    Solution for this topic

    I can see this is happening because you have added below CSS code in the style.css file of your child theme.

     

    .archive .blog-style-masonry article, .search .blog-style-masonry article {
        position: relative !Important;
        top: 0 !Important;
        left: 0 !important;
    }

     

    You can resolve the issue by removing the above CSS code.

    theathleteblog
    Participant

    Thanks for checking!

    I removed that line of code, but it doesn’t seem to solve the issue. Here masonry is still quite mixed and on this search results page the numbering is in a very weird place

    I visited the shared pages and they are displaying fine for me.

     

    Could you please test it clearing your browser cache?

     

    theathleteblog
    Participant

    thanks, that seemed to have solved the issue, yet in incognito mode it still shows blank spots as previously.

    However, now after I scroll to the bottom on this page the very last post overlaps with the footer and is almost non-visible (screenshot attached) – I think that was the reason why I added that code. Can you check why that happens, please?

    Please try updating the theme on your website to the below latest version as described here https://support.shufflehound.com/updating-theme/

     


    Please login to access this file

    theathleteblog
    Participant

    I updated the theme now, but it didn’t seem to fix the problem

    Please try deactivating the Footer Parallax option in the theme settings as shown in the attached screenshot.

    Attachments:
    You must be logged in to view attached files.

    theathleteblog
    Participant

    Hi,

    I did and it made it worse – now all posts have this problem. It seems like masonry is not recognized as a space and footer comes right after the header

    theathleteblog
    Participant

    Solution for this topic

    Hi,

    I found the problem – I had defined height:auto on the archive pages and it overwrote the height from the masonry and set it to 0. Everything is working now, thanks for the support!

    You are most welcome here 🙂

    SPayne
    Participant

    Where did you find this change, my website is doing the same thing and I would like to solve the issue.

    Shufflehound
    Moderator

    Hi there,

     

    Sorry for our late response. Please notice that it is better to start a new topic that to reply for old one.

     

    Previously this was answered by different support user, so we will need a link to your website, so we can see the issue in live.

     

    Best regards,

    Shufflehound team

    • This reply was modified 2 years, 6 months ago by Shufflehound.
Viewing 17 posts - 1 through 17 (of 17 total)