Merge profile picture into forum posts (chat bubble)

[md_fadhli]

Hello!

I just got the Enfold theme not too long ago and I must say this theme is fantastic! Before I begin, I would like to declare that I know nothing about css codes (basics maybe).. So basically, I’m a newbie who does extensive trial and error until I get it right!

The issue I’m facing: bbpress forums on iOS devices (or maybe mobile devices in general) cramping posts/comments to the right, causing a wasted portion on the left.

The entire UI on desktop is brilliant. It looks neat and clean and poses no problem at all. The tricky part starts when a user is on a mobile device. Posts tend to cramp itself on the right portion of the screen, with the profile photo taking the entire left side. It looks as though there is an imaginary box (like a chat bubble) so this has caused long wall of text to be unbearable to read.

I’m trying to figure out if there is a way to actually merge the profile photo OR place it at the top of the actual post so that the post content takes full width as opposed to being cramped to the right.

Any css code I can pump in to modify this behaviour? I hope you can help me out! :)

Thanks!!

P.S: I’ve included screenshots for your reference, as well as the site URL and dummy account for testing purposes.

[Yigit]

Hi Fadhli!

Please add following code to Quick CSS in Enfold theme options under General Styling tab

@media only screen and (max-width: 768px) {
#bbpress-forums div.bbp-reply-author { float: none; margin-bottom: 10px; }
.bbp-reply-author:before { display: none; }}

Cheers!
Yigit

[bobfurgo]

Hello! I am having this same problem. I added the quick CSS and it didn’t seem to do much.

[Ismael]

Hey!

I checked the link that you provided but it doesn’t exist. Please check the url.

Best regards,
Ismael

[bobfurgo]

Sorry, I changed the permalinks and forgot to update it here. Here is the new url:

[Yigit]

Hey!

I replied you here – https://kriesi.at/support/topic/bbpress-styling/
If that does not help, please post login credentials in private content field in your own thread so we can look into it :)

Best regards,
Yigit

[bobfurgo]

Hi Yigit!

Yes I saw this post, thank you! But what you posted there doesn’t seem to answer my question that pertains to the post above though, unless i’m missing something.

The reason why I posted here is because I am having the same issue that md_fadhli posted in the first post above. The use of real estate of the text on mobile does not look right. The author takes up 1/3 of the screen on the left and then the text is restricted to 2/3 of the screen on the right ( there is a large gap in the space underneath the author avatar) Does this make sense?

the code that was provided above did not work for me:

@media only screen and (max-width: 768px) {
#bbpress-forums div.bbp-reply-author { float: none; margin-bottom: 10px; }
.bbp-reply-author:before { display: none; }}

[Vinay]

Hi!

We understand your point. The solution is to display the profile picture on top of the text and make text content 100% wide. in order to help you with this we need your

@media (max-width: 480px) {
    .single-topic #bbpress-forums div.bbp-reply-author, .forum-search #bbpress-forums div.bbp-reply-author, .bbp-user-page #bbpress-forums div.bbp-reply-author, .forum-search #bbpress-forums div.bbp-topic-author {
        width: 100% !important;
    }
    #bbpress-forums div.bbp-topic-content, #bbpress-forums div.bbp-reply-content {
        margin-left: 0px !important;
    }
    .reply-header {
        margin-left: 0px !important;
    }
}

I’m closing this thread so the issues don’t get mixed up. If this solution don’t work please reply on your thread with login info in a private message.

Cheers!
Vinay

[Author]

Posts