Skip to:
Content
Pages
Categories
Search
Top
Bottom

Mobile – avatar overlapping topic title!

  • @nicolasmahy

    Participant

    Hi,

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

Viewing 16 replies - 1 through 16 (of 16 total)
  • @casiepa

    Moderator

    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.

    @nicolasmahy

    Participant

    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…

    @casiepa

    Moderator

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

    Pascal.

    @robkk

    Moderator

    @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

    Moderator

    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/

    @casiepa

    Moderator

    @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

    Moderator

    @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 ;
     }

    @casiepa

    Moderator

    Now this is teamwork ! 🙂

    Thanks to all, Pascal.

    @nicolasmahy

    Participant

    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

    Moderator

    link to your site please

    @robkk

    Moderator

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

    @nicolasmahy

    Participant

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

    @casiepa

    Moderator

    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

    Moderator

    @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;
    }
    }

    @nicolasmahy

    Participant

    @robkk


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

    Thanks for the help everybody!

    @casiepa

    Moderator

    Happy to see that you’re fixed!
    Pascal.

Viewing 16 replies - 1 through 16 (of 16 total)
  • You must be logged in to reply to this topic.
Skip to toolbar