Mobile version of BBPress looking bad

Hello,

URL: http://yourtechadvisors.com/forums/topic/testing-syntax-highlighter/

For some reason in mobile view, the content goes crazy. The post content goes every which direction, the user label and author name goes every direction, and it looks really bad. Could you please check and see what is going on with the CSS?

Thanks,

Alex :smiley:

  • Luís
    • Support

    Hi Alex S ,

    Hope you’re doing well today!

    In your custom CSS you will find this CSS code:

    .bbp-author-role {
    margin-top: 70px;
    margin-left: -70px;
    }

    Remove the margin left and change it to:

    .bbp-author-role {
    margin-top: 20px;
    }

    Topic content it’s displaced in several breakpoints, so, try this CSS code to correct it:

    @media only screen and (max-width: 800px) {
    .bbp-reply-content {
    margin-left: 130px !important;
    }
    }

    To the mobile portrait (320×480) try:

    @media only screen and (max-width: 480px) {
    .bbp-reply-author {
    display: block;
    padding-left: 0 !important;
    }

    .bbp-author-name {
    font-size: 16px;
    margin-top: 0 !important;
    }

    .bbp-reply-content {
    margin-left: 50px !important;
    }
    }

    I hope this information has been helpful. If I can help you in this or other questions, please let me know!

    Cheers, Luís

  • Alex Stine
    • System Administrator

    Hello,

    That got it looking quite a bit better, however, there are still some things to do.

    A: Make sure user label is not covering Options button.

    B: Minimize whitespace in between author info and the content.

    C: Make sure that the reply/post text is aligned to the left, that is not the case now.

    Thanks,

    Alex :smiley:

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.