The default bbpress topic index page does not look good on mobile at all. I would like to customize it. I could see that the bbpress.org topic index page looks good. They were able to remove stuff like this Started by: ollietubb1 in: Troubleshooting and also remove the freshness icon and name from the topic index page to get things well organized.

Open this URL on your mobile to see: https://bbpress.org/forums/

Please, could you guide me to do the same thing to improve the mobile view of the topic index page? I am using bbpress Version 2.6.9

Thanks in advance.

[@robin-w Moderator 2 years, 5 months ago]

A lot of mobile changes depend on the theme being used.

These are the css changes that this site uses for smaller devices

/* Do not fix #header for non-desktops */
@media screen and ( max-width: 782px ) {
	#header {
		top: 0;
		z-index: 99999;
		position: absolute;
	}
	#wpadminbar {
		z-index: 88888;
		height: 56px !important;
		position: absolute;
	}
	#wp-toolbar {
		width: 100%;
	}
	#main {
		margin: 100px 10px 40px 10px;
	}
	body:not(.trac):not(.home-page) #main {
		margin-top: 140px;
	}
	#footer {
		padding: 10px;
		margin: 10px;
	}
	#footer div.links,
	#footer div.details {
		float: none;
		margin: 10px 0;
	}
	#bb-menu-icon,
	#mobile-menu-button {
		display: block;
		position: absolute;
		right: 0;
		padding: 33px 20px 33px 33px;
		text-decoration: none;
	}
	#header #nav,
	#wporg-header #wporg-header-menu {
		margin: 0;
		float: right;
		overflow: visible;
	}
	#header #bb-nav,
	#wporg-header #wporg-header-menu {
		position: absolute;
		width: 100%;
		right: 0;
		top: 81px;
		border-bottom: 1px solid #aaa;
	}
	#header #bb-nav li,
	#wporg-header #wporg-header-menu li {
		width: 100%;
		text-align: center;
		margin: 0;
		padding: 0;
	}
	#header #nav #bb-nav li a,
	#wporg-header #wporg-header-menu li :link,
	#wporg-header #wporg-header-menu li :visited {
		display: block;
		margin: 0;
		padding: 20px;
		color: #000;
		text-shadow: none;
		border-radius: 0;
	}
	#header #nav #bb-nav li.current a,
	#header #nav #bb-nav li a:hover {
		color: #fff;
	}
	#header #bb-nav,
	#bbpress-forums .bbp-pagination-count,
	.bbp-topic-meta,
	#wporg-header #wporg-header-menu {
		display: none;
	}
	#header #nav:hover #bb-nav,
	#header #nav:focus #bb-nav,
	#wporg-header #wporg-header-menu.toggled {
		background-color: #eee;
		display: block !important;
	}
	#wporg-header #wporg-header-menu.toggled {
		background: #eee;
	}
	#header #nav:hover #bb-menu-icon:before,
	#header #nav:focus #bb-menu-icon:before,
	#wporg-header #mobile-menu-button[aria-expanded="true"]:before {
		color: #fff;
	}
	#wp-admin-bar-my-account img.avatar {
		height: 38px !important;
		width: 38px !important;
	}
}

/* Mobile */
@media only screen and (max-width: 480px) {
	#bbpress-forums div.bbp-topic-author img.avatar,
	#bbpress-forums div.bbp-reply-author img.avatar {
		width: 72px;
		height: 72px;
		margin: -5px 0 0 -5px;
		transform: rotate(-5deg);
	}

	#bbpress-forums .bbp-author-role {
		border: none;
		background: transparent;
		padding: 0;
		margin: 0;
	}

	#bbpress-forums p.bbp-topic-post-date,
	#bbpress-forums p.bbp-reply-post-date {
		position: absolute;
		right: -13px;
		top: -17px;
		font-size: 10px;
		margin: 0;
	}

	#bbpress-forums div.bbp-topic-author .bbp-author-avatar + br,
	#bbpress-forums div.bbp-reply-author .bbp-author-avatar + br,
	#bbpress-forums div.bbp-topic-ip,
	#bbpress-forums div.bbp-reply-ip {
		display: none;
	}

	#bbpress-forums li.bbp-body div.type-topic span.bbp-admin-links,
	#bbpress-forums li.bbp-body div.type-reply span.bbp-admin-links {
		display: block !important;
		border-top: 1px dotted #ddd;
		margin: 10px 10px 0 10px;
		padding: 5px 0;
		position: relative !important;
		top: 0;
		left: 0;
	}
}

You can play with them to get your site looking nicer

either add them to the custom css part of your theme, or use

Code Snippets

[@kwakok Participant 2 years, 5 months ago]

It’s a pleasure to have people like you,@robin-w, around to get things fixed and get the job done. I’m still playing with the above CSS code and it is producing positive results. Thanks a bunch.

[@kwakok Participant 2 years, 5 months ago]

Still trying to customize bbpress, I’ve bumped into a little challenge with the topic reply headers which contain the date of reply and the reply number eg. #72.
I have made the background of the topic reply header white. However, I realized that there are border lines on the left and on the right which I could not remove after many attempts. See

Which one is stronger, leopard or hyena?

I think, my page would look nicer, and also I will be able to do more customization if those left-right border lines are removed.
I would appreciate any help in removing these border lines. Thanks in advance.