[Kristian Yngve]

I’ve noticed there are some issues when the forums are displayed on handsets.

Users names from under their profile pictures trail off the right side of the screens, and worse still, when reading posts and replies within topics, all the users profile pics squash themselves all together at the top left hand-side of the screen.

** Note that if I rotate my handset to the landscape side, it all works great and no issues at all with the profile pictures going back to the normal places…

Everything else works great, just this little incompatibility. Any of you guys can suggest anything like a CSS rule that only targets this issue with the BBPress plugin to fix this?

Many many thanks all.

[mithrandir]

If you could provide more information regarding which WordPress theme you are using and any more specific areas in detail that are causing issues I could try my best to help out.

Many themes include there own styling which can interfere with bbPress styling, so it is best to take that into consideration before modifying the CSS.

As far as my experience goes, bbPress provides bare minimal styling, Personally I find this to be advantageous, in the case of adding your own styles to match your theme, one does not have to override too many complex styling rules. yet, I agree there is still room for improvement with default bbPress responsive styling.

[mithrandir]

Does the issue exist on various mobile devices or is it specific to a single model/device? could you please include the mobile device information including screen size and screen resolution.

[Kristian Yngve]

Sure, here’s all that info:

I am using the very latest WordPress, I updated recently but unaware if the problem existed beforehand. I have had this wp theme for 3 years and I remember BBpress working well when I first installed it just over 2 years ago.

The only affected area is only within topic at the point of conversation threads. The issue happens when the screen is at iPhone6+ size and smaller when viewed on the portrait side.

All avatars shift to the top left-hand side of screen together as they all sit on top of each other. I have viewed this on the chrome and safari browser.

Any ideas upon what I can do to overcome this?

[mithrandir]

I have had this wp theme for 3 years

I cant seem to see the name of the theme in your last reply, could you please include it again and ill have a look.

Also just wondering, If you open the bbpress dot org support forums does a similar alignment problem exist?

[mithrandir]

Would a live link (url) to your forums be possible?

[Kristian Yngve]

Oh sorry, the theme is called DiscoveryPro
Bought from this website: https://www.templateexpress.com/responsive-wordpress-themes/

Perhaps in can get on with those guys to enquire what could be causing it from there side. Maybe they can offer some CSS that’ll stop it from breaking but in terms of classing anything but they won’t know the plugin specifics?

[mithrandir]

Yes that would be the best solution, depending on their support for theme customization. I have extracted(just for testing purposes) the CSS from there live demo site for ‘discoverypro’, and can confirm it is the cause of the bbPress styling issues.

Users names from under their profile pictures trail off the right side of the screens

fix:

.bbp-body .bbp-topic-meta .bbp-author-name{
	display:block;
}

when reading posts and replies within topics, all the users profile pics squash themselves all together at the top left hand-side of the screen.

*I cannot recreate this issue as it is specific to your website, however if you could provide a link to your forums/website it would be possible to fix the issue.

[Kristian Yngve]

@media only screen and (max-width: 480px){
#bbpress-forums div.bbp-forum-author,
#bbpress-forums div.bbp-topic-author,
#bbpress-forums div.bbp-reply-author {
position: relative;
}
#bbpress-forums div.bbp-reply-author img.avatar{
position: relative;
display: block;
}
}

[Kristian Yngve]

I was sadly unable to trick the forum in showing you my site, no matter how hard I tried.

However, Template Express WP Themes got back to me with this – and without any needed tinkering. It works.

1. This is for anyone who has the same problem, can now follow this conversation and find the fix. (hopefully!!).

2. Many, many thanks to @mithrandir786, whom inspiringly and selflessly did the best to help me get here.

Thank you….

[mithrandir]

Glad its all sorted out :), happy to help out. And thankyou, for sharing the solution, hopefully it could help someone else.
cheers!