Hello!

I’m using bbPress 2.5.8 with theme Twenty Sixteen (WP 4.4.2). Accidentally I noticed, that when viewing topic on a devices with small screen (less than 414×736) all of the author avatars are sliding to the upper left. Here is a screenshot:

I tried to install bbPress on a fresh WP install and the avatar does not seems to slide, when viewing in small screens. So, I deactivated all the plugins, removed all known theme modifications, css styles, but avatar is still misplaced.

Here is a link to the test topic: http://rugby-forum.ru/wp2/forums/topic/test/ Can you please, take a look and guess what may be wrong here and how to fix this?

Thank you in advance!

[@valery-kondakoff Participant 8 years, 8 months ago]

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.

[@casiepa Moderator 8 years, 8 months ago]

Hi,
You will have to go with

{
 position: relative ;
 top : 0px ;
}

Pascal.

[@valery-kondakoff Participant 8 years, 8 months ago]

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).

[@robkk Moderator 8 years, 8 months ago]

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