[nicolas.mahy]

Hi,

The avatar of the person who last replied, overlaps the topic title on mobile phones.
How can I fix this?

[Pascal Casier]

Hi Nicolas,

Ah, het studentenleven, waar is de tijd 🙂

It seems that any device with a screen going below 480 pixels in width will have this issue (try to use a browser on the PC and play with the window). You seem to be using a standard 2013 theme, but that does not seem to be the issue because I have the same behaviour on a test website with another theme.

Let me have a look around.

Pascal.

[nicolas.mahy]

Hi Pascal,

Ja, BBpress kan zeker gebruikt worden om het studentenleven NOG aangenamer te maken 😉

I’m using indeed the twenty thirteen-theme. So what could fix this issue? I’ve tried to find the php-file that’s responsible for placing the topic title at the top of the page, so I could use a couple of <br>’s to solve the issue. It’s not the loop-topics.php or loop-replies.php…

[Pascal Casier]

I have launched the question to some of the other guys, let’s see if they have an idea.

Pascal.

[Robkk]

@nicolasmahy

This happens when you have threaded replies enabled.
https://bbpress.trac.wordpress.org/ticket/2823

The issue is caused by some CSS for absolute positioning the avatar, and also includes this other issue.

https://bbpress.trac.wordpress.org/ticket/2757

[Robin W]

Whilst it needs sorting in the core product, the ticket says that putting this in the css file will fix, and did on my test site

#bbpress-forums div.bbp-topic-author img.avatar,
#bbpress-forums div.bbp-reply-author img.avatar {
position: relative
}

https://codex.bbpress.org/functions-files-and-child-themes-explained/

[Pascal Casier]

@robkk, thanks for pointing to that one !

@robin-w, works on my site (just a slight overlapping of the picture on the name, but that could be another thing I did on the avatars.

@nicolasmahy, can you have a try ?

Pascal.

[Robin W]

@casiepa

setting top to zero fixes that !

#bbpress-forums div.bbp-topic-author img.avatar,
 #bbpress-forums div.bbp-reply-author img.avatar {
 position: relative ;
 top : 0px ;
 }

[Pascal Casier]

Now this is teamwork ! 🙂

Thanks to all, Pascal.

[nicolas.mahy]

Hmm still not solved… 🙁
The single replies don’t contain avatars, but the only avatar that’s showing is the avatar of the last person who replied. And it’s still overlapping the title of the topic.

[Robin W]

link to your site please

[Robkk]

@robin-w

Link to his site is in the picture in the address bar.

http://stushare.be/forums/topic/waar-doe-ik-het-best-erasmus/

It seems that your CSS fixed the issue with the avatar in the title.

[nicolas.mahy]

Nothing has changed… I think there’s something wrong with the mobile responsiveness… On desktop nothing is wrong with the topics.

[Pascal Casier]

Hi Nicolas,
It works fine for me now on my mobile ! But I had to do a page refresh, so probably it’s your local cash on your phone/tablet.
Pascal.

[Robkk]

@nicolasmahy

Yeah the responsive styles in bbPress use .bbp-body which is having the issue here. But since you customized and removed the labels in the header of the forums you can try this custom CSS and see if it helps any.

@media screen and (max-device-width: 480px) {
#bbpress-forums div.bbp-forum-content, 
#bbpress-forums div.bbp-topic-content, 
#bbpress-forums div.bbp-reply-content {
    margin-left: 0px;
    padding: 12px;
}

#bbpress-forums div.bbp-forum-author,
#bbpress-forums div.bbp-topic-author,
#bbpress-forums div.bbp-reply-author {
    float: none;
    text-align: center;
    width: 100%;
}

#bbpress-forums div.bbp-forum-author a.bbp-author-name, 
#bbpress-forums div.bbp-topic-author a.bbp-author-name, 
#bbpress-forums div.bbp-reply-author a.bbp-author-name {
    margin: 0;
    word-break: break-word;
    display: block;
}
}

[nicolas.mahy]

@robkk

@casiepa was right, I suppose it was due to the caching.

Thanks for the help everybody!

[Pascal Casier]

Happy to see that you’re fixed!
Pascal.