Blog Overlapping Footer Bug

Hi athemes,

I’m having a problem where the blog page has the posts overlapping the footer of the site. Frustratingly, the issue only occurs sporadically and if you refresh the page it goes away. I’ve included a screenshot to show the problem but here is a link to the site as well: http://www.shiftapp.uk/blog/

Any help really appreciated, thank you!

Screenshot

Hi Harry,

I would like to apologize in advance for the inconvenience. Please try adding this CSS code into Appearance > Customize > Additional CSS in your site dashboard. Let me know how it resolves the issue.


@media only screen and (min-width:768px) {

  .masonry-layout .posts-layout:before,
  .masonry-layout .posts-layout:after {
    content: '';
    display: block;
    width: 100%;
  }

  .masonry-layout .posts-layout article {
    position: static;
    float: left;
  }

}

Regards,
Kharis

Thanks Kharis, really appreciate the speedy reply!

The code appears to have fixed the problem thank you - however, because it does not always appear I may be wrong. I’ll let you know if the problem occurs again.

Cheers,
Harry

You’re most welcome here! I’m glad to have an opportunity to assist you.

Regards,
Kharis

Hi Kharis,

I’m sorry to say that unfortunately the bug is still persisting even with the use of the code above - I’ve attached another image of the bug below showing how the posts seem to be overlapping if there are multiple posts.

I’m using the safari browser on a Mac. Any more ideas on how to fix the issue would be much appreciated!

Thank you,
Harry.

Bug

Hello Harry,

Try adding this CSS code, please.


@media only screen and (min-width:1200px) {
  
  .masonry-layout .entry-thumb {
    min-height: 146px;
  }
  
}

@media only screen and (min-width:992px) {

  .masonry-layout .entry-thumb {
    min-height: 184px;
  }  
  
}  

@media only screen and (min-width:768px) {

  .masonry-layout .entry-thumb {
    min-height: 138px;
  }  
  
}  

Regards,
Kharis