Mobile Fix For Forum On Phone

[Looneymccluney]

I posted this on “Hello, Who Are You?” forum topic but I think posting here is more appropriate.

I noticed that the forum on my phone is hard to read as the content is in a long column to the right. I did a quick fix for this with some CSS have your web guy put this in the stylesheet and it should look much better on phones.

@media(max-width:600px){

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

.bbp-reply-author {
    width: 100% !important;
    text-align: center;
    float: none !important;
    background: #f4f4f4;
    border: 1px solid #dddddd;
    margin: 20px 0px 20px 0px;
    padding: 20px;
    padding-top: 10px;
}

.bbp-reply-author img {
    float: left !important;
}
}

[Looneymccluney]

here is another bit of css that fixes some other mobile issues

@media(max-width:768px){
li.bbp-header {
    display: none;
}

li.bbp-forum-topic-count:before {
    content: 'Topics';
    float: left;
    margin: 0 auto;
    width: 100%;
    font-weight: bold;
}

li.bbp-forum-reply-count:before {
    content: 'Posts';
    float: left;
    margin: 0 auto;
    width: 100%;
    font-weight: bold;
}

li.bbp-forum-info {
    width: 100%;
    padding: 10px;
    text-align: center !important;
}

li.bbp-forum-freshness {
    width: 100%;
}

li.bbp-forum-reply-count ,li.bbp-forum-topic-count {
    text-align: center;
    width: 50%;
    padding: 0px 0px;
    margin-bottom: 0px !important;
}

.bbp-forum-content {
    text-align: center !important;
}
}

You can try it in the browser inspector

[Looneymccluney]

Ok… I combined everything together and found a few things my css was messing up but its should be fixed. I heard in one of your podcast you were looking for a web designer help out with somethings so hopefully Im not being annoying posting a bunch of CSS in your forum. I probably should have just contacted Jay outside of here. I will stop with the CSS now haha. Let me know if you need help anytime!

.bbp-replies .bbp-header {
    display: block;
}
.bbp-topics .bbp-header {
    display: block;
}
@media(max-width:600px){
.bbp-topics .bbp-header {
    display: none !important;
}
.bbp-reply-content {
    margin: 0px !important;
}

.bbp-reply-author {
    width: 100% !important;
    text-align: center;
    float: none !important;
    background: #f4f4f4;
    border: 1px solid #dddddd;
    margin: 20px 0px 20px 0px;
    padding: 20px;
    padding-top: 10px;
}

.bbp-reply-author img {
    float: left !important;
}
li.bbp-topic-title {
    width: 100%;
    padding: 10px;
    text-align: center !important;
}

li.bbp-topic-voice-count, li.bbp-topic-reply-count {
    text-align: center;
    width: 50% !important;
    padding: 0px 0px;
    margin-bottom: 0px !important;
}

li.bbp-topic-freshness {
    text-align: center;
    width: 100%;
    padding: 0px 0px;
    margin-bottom: 0px !important;
}

li.bbp-topic-reply-count:before {
    content: 'Replies';
    float: left;
    margin: 0 auto;
    width: 100%;
    font-weight: bold;
}

li.bbp-topic-voice-count:before {
    content: 'Voice';
    float: left;
    margin: 0 auto;
    width: 100%;
    font-weight: bold;
}
.bbp-topics li.bbp-header {
    display: none;
}
}

@media(max-width:768px){
.bbp-header {
    display: none;
}

li.bbp-forum-topic-count:before {
    content: 'Topics';
    float: left;
    margin: 0 auto;
    width: 100%;
    font-weight: bold;
}

li.bbp-forum-reply-count:before {
    content: 'Posts';
    float: left;
    margin: 0 auto;
    width: 100%;
    font-weight: bold;
}

li.bbp-forum-info {
    width: 100%;
    padding: 10px;
    text-align: center !important;
}

li.bbp-forum-freshness {
    width: 100%;
}

li.bbp-forum-reply-count ,li.bbp-forum-topic-count {
    text-align: center;
    width: 50%;
    padding: 0px 0px;
    margin-bottom: 0px !important;
}

.bbp-forum-content {
    text-align: center !important;
}
}

[Marjean28]

If you turn your phone, rotate it, it helps this problem on the viewing side. To some degree.

[Author]

Posts