Topic: bbp-topic-form won’t show up properly on mobile

bbp-topic-form won’t show up properly on mobile

hiugregg
Participant

@hiugregg

5 years ago
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?

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

Clivesmith
Participant

@clivesmith

5 years 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

@robin-w

5 years ago

depends on the mobile see

http://mobiletest.me/

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

Clivesmith
Participant

@clivesmith

5 years 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

@robin-w

5 years 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

@clivesmith

5 years 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
Prima M
Participant

@primamahartanto

4 years, 12 months 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

@clivesmith

4 years, 11 months 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

@nickds

4 years, 10 months ago

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

Thanks for your help,
Nick

Clivesmith
Participant

@clivesmith

4 years, 10 months ago

Hi Nick,
No not solved it yet

Clive

nickds
Participant

@nickds

4 years, 10 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

@robin-w

4 years, 10 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

@nickds

4 years, 10 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

@robin-w

4 years, 10 months ago

at the moment the whole forum page looks bad

nickds
Participant

@nickds

4 years, 10 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

@robin-w

4 years, 10 months ago

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

nickds
Participant

@nickds

4 years, 10 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

@robin-w

4 years, 10 months ago

great – glad you are fixed

Clivesmith
Participant

@clivesmith

4 years, 9 months ago

Hi Nick,

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

Clive