posts stocking on top of each other

  • Author
    Posts
  • #148821

    hanneramses
    Member

    this didnt use to be a problem, but suddenly the headline of the posts on the main page grid is stocking on top of each other. What can I do to solve this problem?

    The blog I need help with is eurovisionsquad.com.

    #148864

    lelandf
    Theme Author

    Hi there,

    I just wanted to acknowledge that I see the issue on your site. I’m not quite sure what is happening at the moment because the Owari demo site does not present this issue.

    Let me do some digging around to see what I can figure out. I’ll keep you updated.

    #148865

    lelandf
    Theme Author

    For some reason the new “infinite scroll” posts on your site do not get their positions adjusted properly by the Masonry script.

    The only major difference I see between the Owari demo site and your site is that your new posts load automatically while the demo site’s new posts are triggered by pressing an “Older Posts” button.

    You can match that by following this guide: https://en.support.wordpress.com/infinite-scroll/#disabling-infinite-scroll

    I tried enabling Infinite Scroll on my demo site and I still didn’t see the issue as seen on your site, so that may not help.

    Are you using any other settings that customize the display of the homepage that you are aware of?

    In the meantime, I figured out a quick fix for you.

    1. Use the following Custom CSS to ensure the first batch of “infinite scroll” posts are hidden. This will at least mean the posts displayed on the homepage are legible, although it would mean newly loaded posts would be invisible:

    #infinite-view-1 { display: none !important; }

    2. You could also get more posts to load initially by adjusting the Reading Settings: https://en.support.wordpress.com/settings/reading-settings/ …right now it looks like it’s set to 7. Maybe try 14?

    Regards,
    Leland

    #148867

    hanneramses
    Member

    Your code fixed the problem. Turned off the infinite scrolling as you said. Now the page show the “older post” button, but it doesn’t seem to be working.

    The only additional code I used is this one:

    body .site-header {
    	min-height: 0;
    	padding: 33.3333% 0 0;
    }
    
    body .site-branding {
    	margin-top: 0;
    }
    

    Seems odd that that would be the problem?

    #148868

    lelandf
    Theme Author

    Your code fixed the problem.

    Great. Yes, I see it looks much better now.

    I’d maybe try increasing the number of posts in Reading Settings even more just because your sidebar is so long, it may look unbalanced. Up to you though.

    Turned off the infinite scrolling as you said.

    Okay, for now I would turn this back on, just so it’s not confusing to your users why no new posts load when this button is clicked. I was just curious if this made a difference, although I had a hunch it wouldn’t because like I said, this made no difference on my demo site either.

    Seems odd that that would be the problem?

    Yes, I doubt this Custom CSS applying to elements in the site header would have anything to do with the issue described.

    #148869

    hanneramses
    Member

    Thank you so much for your help!

    I also have one more tiny problem. It’s just a small thing, but underneath the headlines for the posts it tells the date and who the author is. There isn’t any space between the first part (date) and the second part (author). How could I get space in front of the authors name?

    #148931

    lelandf
    Theme Author

    You’re very welcome.

    For the space between author and date, try this Custom CSS:

    #masonry .posted-on {
      display: inline-block;
      padding-right: 5px;
    }

    Feel free to adjust the “5px” to a greater value (like “10px”) or lesser value (like “3px”) as per your personal preference.

    Regards,
    Leland

    #148937

    hanneramses
    Member

    That only makes the distance between the date and the author even bigger. The two words (by & authors name) were still stucked together. Tried changing it to this:

    #masonry .by {
      display: inline-block;
      padding-right: 2px;
    }

    That made the trick!
    Thanks for all your help and time! :)

    #148944

    lelandf
    Theme Author

    Good to hear you got it figured out. Please let me know if you have any further questions, I’m glad to help.

    -Leland

The topic ‘posts stocking on top of each other’ is closed to new replies.