Chat box and After Header content issue on mobile

Support

AI-generated summary

Chat box and After Header content issue on mobile

Vaping_Community is experiencing an issue on mobile where the chat box is being pushed down by content in the after header, specifically two adverts. Removing the divs and keeping only the images did not resolve the issue Vaping_Community. However, refreshing the browser fixes the issue temporarily Vaping_Community. A workaround is needed as removing the adverts is not an option Vaping_Community.

Don provided a CSS solution to hide the ads on chat, but Vaping_Community wants the ads to remain visible. Thankfully, Don suggested an alternative CSS code that targets the ads separately, which Vaping_Community found to work perfectly.

1

Discourse 3.4.0.beta1-dev
iPhone SE 2020

I’m seeing an issue on mobile where the chat box is being pushed down if there is content in after header, in my case 2 adverts as shown in the picture, I cannot get to the reply box

Wrapped in divs with minimal CSS associated with it.

The image is a screenshot from a smartphone displaying a conversation within a social media app. (Captioned by AI)
The image is a screenshot from a smartphone displaying a conversation within a social media app. (Captioned by AI)750×1334 160 KB

2

Tried to remove the divs and keep just the images but still the same issue

3

On initial chat load the chat box is forced down under the After Header content, if you then refresh the browser you are able to view channels by scrolling and PM’s are completely fixed, no scrolling.

Completely broken in discourse hub app

4

I can’t remove the adverts, anyone got a workaround?

5

Hello :waving_hand: Why you can’t hide ads on chat? Is that because you want to the ads be there or technical reason? It can be targetable with CSS separately to chat.

Something like:
Change your-ads-class to the class which you can target house-ad.

body.has-full-page-chat {
  .your-ads-class {
    display: none;
  }
}
6

Yeah I need the ads to show.

Thank you so much you’re a life saver, the CSS works perfectly :ok_hand: