Hi there!

I’m trying to get a bbpress forum set up on my site, and while we’ve got the majority of it set up the way we’d like, there’s an issue when someone tries to access the forum via mobile/smartphone.

The reply box seems to overflow over the edge of the screen, such as in this picture:

I tried to adjust the width of the bbpress-topic-form using the Custom CSS on my theme, but while this seems to work for narrow browser windows on desktop, the mobile view remains the same as it does in the picture above.

For reference, this was the code I was trying:

@media only screen and (max-width: 600px) {
  #new-topic-0.bbp-topic-form{
    width: 50%;
  }
}

I was wondering if anyone had any ideas on what might be going on here? I’m running the Gridmag theme (not pro) at the minute, could that be causing a conflict?

[@clivesmith Participant 5 years, 1 month ago]

I have tried to sort this out as well without any luck, I have tried other themes as well, it is the same on bbpress 2.5.14 which I am still using because subforums has not been sorted yet.

[@robin-w Moderator 5 years, 1 month ago]

depends on the mobile see

http://mobiletest.me/

and select the phone – you’ll see the css width listed under each

[@clivesmith Participant 5 years, 1 month ago]

Hi Robin

Forums and topics are fine on all the phones and tablets, it is only the replies on all the phones that is not correct.

Clive

[@robin-w Moderator 5 years, 1 month ago]

ok, change your code to

@media only screen and (max-width: 600px) {
  #new-topic-0.bbp-topic-form, .bbp-reply-form {
    width: 50%;
  }
}

[@clivesmith Participant 5 years, 1 month ago]

Hi Robin,

I did try that but it made the reply too small.

Before we look more I would like to share what I see on the mobiletest.me

Iphone res 640px topic create off screen – reply off screen
HTC res 1080px topic create off screen – reply off screen
Lumia res 768px topic create off Screen – Reply off screen
Galaxy res 240px topic create OK screen – reply off screen
tablets all OK

what I find really strange is that on ALL the above phones the Header pic, post title and contents all fit OK.

website is wateratairports.com

[@primamahartanto Participant 5 years ago]

Hy You can try this…

/* BBPress Fix Topic bbp-topic-form won’t show up properly on mobile */
@media (max-width:380px) and (min-width:320px) {
	#bbpress-forums .bbp-the-content-wrapper,
	#bbpress-forums #bbp_topic_title {
		width: 100%;
	}
}

[@clivesmith Participant 5 years ago]

Sorry I have not replied before we have been on holiday.

Hi Prima Thanks but that does not seen to work, no change

[@nickds Participant 4 years, 11 months ago]

Hi there, did you solve it? I have the same issue.

Thanks for your help,
Nick

[@clivesmith Participant 4 years, 11 months ago]

Hi Nick,
No not solved it yet

Clive

[@nickds Participant 4 years, 11 months ago]

Hm, can anyone help, please? It´s going to be urgent now.

Here is the testing forum:

darkplace.cz/forums/

please check post/reply page on mobile.

Thanks.
N.

[@robin-w Moderator 4 years, 11 months ago]

@nickds the issue is site/theme specific – I cant fix everyone’s theme issues !!

a quick look at your site and the forums page appears to have issues with your theme performing calculations on the css eg

.entry .entry-content > *, .entry .entry-summary > *, .entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *, .entry .entry-content > .wp-block-group > .wp-block-group__inner-container > * {
	max-width: calc(6 * (100vw / 12) - 28px);
}

[@nickds Participant 4 years, 11 months ago]

Hi Robin, fully understand. Thanks for your reply.
The issue appears on default wordpress theme and the same appears on Divi theme. I already discuss with the support from Divi and they´v replied, that it has something to do with plugin itself.

[@robin-w Moderator 4 years, 11 months ago]

at the moment the whole forum page looks bad

[@nickds Participant 4 years, 11 months ago]

Back again. I swep whole testing site, delete database and reinstall everything including wordpress and forum loos OK now.
But on my production site which is running on Divi the problem still exist. So it will be really something on Divi´s end…

[@robin-w Moderator 4 years, 11 months ago]

ok, just looked at your site – seems ok, what part EXACTLY is the problem?

[@nickds Participant 4 years, 11 months ago]

Hi Clive, gyus from Divi helped me out to sort it:

add the following CSS code to Custom CSS box in Divi > theme options > general settings:

@media(max-width:980px) {
div#bbpress-forums {
overflow: visible !important;
}
}

Maybe it will help you too.
Nick

[@robin-w Moderator 4 years, 11 months ago]

great – glad you are fixed

[@clivesmith Participant 4 years, 11 months ago]

Hi Nick,

Thanks, but I assume this relates to divi themes, I am running twenty twelve.

Clive