Mobile css?

Resolved Lars Henriksen
(@adjunkten)

9 years, 5 months ago

Hello Robin

Thank you for your work with this plugin.

I wonder if you could add some mobile screen styling to the plugin?

I would like something like this:

and this:

If you cannot include this in your plugin, – do you know how I can achieve this in another way?

Viewing 5 replies - 1 through 5 (of 5 total)

Plugin Author Robin W
(@robin-w)

9 years, 5 months ago

thanks for your topic.

I will need to look at this in some detail, not sure how much is bbpress and how much a particular theme – but I’m currently tied up on paid work, so will look in odd moments.

I’ll leave this thread open for the moment to remind me.

Plugin Author Robin W
(@robin-w)

9 years, 5 months ago

I just did a quick test, and most of the layout is theme dependant.

I’m not sure what you are seeing so how much of you screenshot is what you have and how much is what you want?
Thread Starter Lars Henriksen
(@adjunkten)

9 years, 5 months ago
Hi Robin,

I found some css developed for my free generatepress theme here:

That helped a lot.

My forums now looks like this on my Galaxy:

Two things could be improved, though:

I would like to replace text in the grey horizontal headerbar – ‘forum’ ’emner’ (topics) ‘stemmer'(voices) ‘friskhed’… with icons, like in the wordpress version above.

Forum directory – display of forums and subforums. – looks cluttered.

Thanks for asking.

Lars
- This reply was modified 9 years, 5 months ago by Lars Henriksen.
Plugin Author Robin W
(@robin-w)

9 years, 5 months ago
would like to replace text in the grey horizontal headerbar – ‘forum’ ’emner’ (topics) ‘stemmer'(voices) ‘friskhed’… with icons, like in the wordpress version above.

Without masses of work, I cannot say how WordPress does that.

To improve the display I’d suggest you start by changing the font size for your mobile.

so at the end of your current style.css file, put
```
@media only screen and (max-device-width: 480px) {
  /* define mobile specific styles come here */
#bbpress-forums,
div.bbp-breadcrumb,
div.bbp-topic-tags,
#bbpress-forums ul.bbp-lead-topic, 
#bbpress-forums ul.bbp-topics, 
#bbpress-forums ul.bbp-forums, 
#bbpress-forums ul.bbp-replies, 
#bbpress-forums ul.bbp-search-results,
#bbpress-forums li.bbp-body ul.forum, 
#bbpress-forums li.bbp-body ul.topic {
	font-size: 12px;
}

div.bbp-template-notice p,
#bbpress-forums .bbp-forum-info .bbp-forum-content, #bbpress-forums p.bbp-topic-meta {
	font-size: 10px;
}

.bbp-reply-content {
	font-size: 12px;
}

.topic .bbp-reply-author {
	font-size: 15px;
}

#bbps-post-count,
.bbp-author-role {
	font-size: 10px !important;
}

#bbp-search-results .bbp-topic-title,
#bbp-search-results .bbp-topic-author {
	padding: 20px;
}

#bbpress-forums li.bbp-body ul.forum, #bbpress-forums li.bbp-body ul.topic {
    font-size: 10px;
}

}
```
You can then play with the font sizes to get a better display
- This reply was modified 9 years, 5 months ago by Robin W.
Thread Starter Lars Henriksen
(@adjunkten)

9 years, 5 months ago

OK, thanks for the advice Robin.