Home Forums Weaver for bbPress Using Weaver for bbPress, Edit Profile page(s) aren't mobile responsive

This topic contains 5 replies, has 3 voices, and was last updated by  Weaver 1 year, 5 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #49945

    licksandkicks
    Participant

    Hello, I’m using Weaver for bbPress, and it looks amazing on all of the forum pages!  However, when viewing a user profile on a mobile device, especially a user’s “Topics Started” page, “Replies Created” page, “Favorites” page, and the “Edit User Profile” page, it’s not right at all.  The responsive-ness itself seems to not be functioning properly, but also the “bbp-single-user-details” div is remaining on in a left sidebar position, which is really crunching the screen width remaining for the Body content.

    It seems if the “bbp-single-user-details” div would relocate to the top of the page on smaller screens, and display in a row or a drop-down, that would solve the problem.  Unfortunately, my CSS skills are about .75 on a scale from 1 to 10 lol.

    I’m using the Noisa theme, and three bbPress plugins (in addition to Weaver for bbPress): ‘bbp style pack’ (for the shortcodes), ‘GD bbPress Attachments’, and ‘GD bbPress Tools’.  I also have the ‘WP User Avatars’ plugin, which adds an “Avatar” section to the Body content of the “Edit User Profile” page.  None of those plugins seem to be the cause of this issue, as I’ve disabled them and tested with the same results.

    I’m not expecting perfection, just something that mitigates this issue a bit and makes these pages at least readable and useable on mobile devices.  If anyone could give me some simple CSS to copy/paste, I would be extremely grateful!

    Thanks in advance!

    #49946

    scrambler
    Moderator

    To help with CSS, we would need a link to the page showing the problem.

    Edit:

    Using this forum to test, You can use the @media rule below to do the following on mobile:

    • Stack the bbp-single-user-details above the bbp-user-body
    • Remove the left margin on #bbp-user-body so it lines up n the left
    • Move the user detail #bbp-user-navigation beside the #bbp-user-avatar to maximize space

    You can change the mobile max-width threshold to what you like
    Not sure where you would put the Custom CSS as I dont actually know the plugin or the theme you are using

    @media all and (max-width:581px){
    #bbpress-forums #bbp-user-body {margin-left:0;clear:both;}
    #bbpress-forums #bbp-single-user-details {width:100%;}
    #bbpress-forums #bbp-single-user-details #bbp-user-navigation, #bbpress-forums #bbp-single-user-details #bbp-user-avatar {float:left;}
    }

    @weaver can / may decide if this would be worth adding to the plugin itself.

    #49954

    Weaver
    Keymaster

    I think this represents a good solution that should be included in the themes included with the plugin. I would apply the change to apply to small tablets and smaller. I’m working on another change to the plugin, and will publish a new version soon.

    #49989

    licksandkicks
    Participant

    Thanks, and sorry for the delayed response.  The only reason I didn’t link to a page that would show the problem is because you can’t actually get to those pages on this particular site unless you’re logged in as a user.  I can set one up if need be, but I was hoping that it was such a common problem, there was some code available (much like what you provided) that might work.

    I logged into the site with the intention of adding this code you provided, and I see there is an update for Weaver that has definitely improved my issue substantially!

    My only issue now is that many of the field names/labels are overlapping their respective field input boxes.  I’m going to try to fix that myself… wish me luck.

    THANK YOU BOTH so so much!

    #49990

    scrambler
    Moderator

    If you can also see the issue on this forum, let us know and we can use it to figure out the solution

    #49993

    Weaver
    Keymaster

    I’d like to know exactly which of the fields/labels you see overlap. The only ones that I think area generated automatically by bbPress and styled by Weaver for bbPress are those in the Edit Profile page, and in the Login widget. Those all work as designed/expected on phone widths. I can’t find any other forms.

    If you are having overlaps with those, we’d like to know. And if there are other forms, then the custom CSS for the plugin should be able to easily handle other situations.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.