The issue seems to be related to ‘bbl-author-avatar’ class. But I still can not find any reasons, why avatar suddenly ‘jumps’ to the upper left on small screens…
The only (ugly) workaround I found until now is to hide avatars on the small screens:
@media screen and (max-width: 375px) {
.bbp-author-avatar {
display: none;
}
}
Any other ideas? Thank you.
Hi,
You will have to go with
{
position: relative ;
top : 0px ;
}
Pascal.
Hello, Pascal!
Thank you for helping me again. It turns out this is not .bbp-author-avatar issue. The issue starts when you enable threaded replies in bbPress settings. This is reproducible on fresh WP/bbPress install as well.
So, if threaded replies are enabled, the issue appears. I just disabled those setting on all of my sites and the issue disappeared.
Summary: if threaded replies are enabled in bbPress settings, the topic is rendered wrong on small screens (less than 414×736).
Bug? I’m using bbPress 2.5.8 with theme Twenty Sixteen (WP 4.4.2).
It kind of is both, the issue is caused by some CSS that becomes useless after it uses li.bbp-body that seems to not close properly, breaking the markup when threaded replies is enabled. The avatars going to the top left corner is caused by absolutely positioning the avatar when it reaches about 480px.
https://bbpress.trac.wordpress.org/ticket/2823
A possible workaround for this would be to have a horizontal forum layout.
This stylesheet has an example of the horizontal layout I was talking about. You can Place the file in a folder called css in your child theme to see how the layout takes affect. I have not tried it with 2016 theme yet though so I do not know how it will do.
https://gist.github.com/robkk/ec3129ef78397783fa2a23389be47649