articles overlapping the bottom ones

[smagnun]

Hello

First of all thanks for this great and simple theme!

There is a weird thing happening in the front page, articles are overlapping the bottom ones (see image below), but, when I refresh the page OR when I switch between websites (it’s a multisite wordpress) like https://bitcoinfeed.news/ to https://bitcoinfeed.news/pt it usually correct this issue.

However it is not a good way to solve the problem I guess 🙁

Please advise.

Thanks a lot

[Yazmin]

Hello

The masonry layout uses absolute positioning to work out where each article is positioned, and it looks like those “like buttons” with thumbs up/down are being added after the articles positioning has been calculated.

Are the like buttons powered by a WordPress plugin?

[Yazmin]

Can you try adding this to Customize > Additional CSS:

.masonry-entry {
    margin-bottom: 30px;
}

This will add some extra space below each article to take account of those “like buttons”.

[smagnun]

yes, this is a plugin from wordpress, and it looks like the like buttons are doing this.

 

this solution doens’t work, probably because the absolute stuff

the weird thing is when I switch between the website this solve.

 

hard, I don’t want to deactivate the like buttons…

if you have another idea let me know, thanks anyway

[smagnun]

sorry, actually this padding-bottom solve the issue, not perfect because when it loads correctly I may see a blank space below the articles, but it’s ok, better than cut it…

 

thanks

[smagnun]

after a few tests I realized it is still overlapping…

 

even with this solution, any other idea?

 

thanks

[Andy]

Hi,

I have taken a quick look at this.

A possible solution would be to make the thumb buttons only appear when hovering over each article with this additional css:

.masonry-entry .likebtn_container{
    display: none;
}
.masonry-entry:hover .likebtn_container{
    display: block;
    position: absolute;
    top: 5px;
    left: 5px;
}

[smagnun]

this solution seems to be good

 

I’ll test them and see which one is better, thanks for the patience

[smagnun]

just posting the solution, this was the best way I find to solve this, thanks for this great theme 🙂

#masonry-loop .post-wrapper .entry-content {
position: relative;
}
#masonry-loop .masonry-entry .likebtn_container {
display: block;
position: absolute;
top: -27px;
right: 2em;
}

[Author]

Posts