The comment box is not showing correctly on mobile phone

[mediaasia]

Dear members,

I have installled this comment system on my website http://www.vaanam.dk
When I visit the website on my mobile phone and test an article to how the comment box is, I can only see a little bit of the comment box. I have to change the position of my phone to see the full comment box to write a comment. The comment box does not change to fit the screen on a mobile phone. It looks ok on the computer. It is not "fluid".

Anyone know how to fix it?

[nikosdion]

Please keep in mind that the editor is rendered by Joomla, not Akeeba Engage. All we can do is tell Joomla "please provide an editor here, named X, with width set to 100%, with this content inside it", and expect to receive a POST variable named X allegedly containing the user-edited content when the user submits the form. Joomla hands that information over to the respective editor plugin, and it's that plugin's job to render the actual editor. Do note that some editors ignore the preferred width setting. It's neither up to us, nor even up to Joomla, to ensure the defined width will be set; it's up to the editor plugin itself!

Moreover, the default Joomla editor (TinyMCE) does work correctly on mobile. Here's how it displays on a very narrow screen (350 pixels, a hair smaller than the width of an iPhone SE) on Joomla's default Cassiopeia template:

That said, it looks like you are using JCE. The default and only enabled JCE profile IS NOT made for mobile display; it's made for desktops and laptops with a much wider screen. You need to enable the Mobile profile (if I am not mistaken, that's a JCE Pro feature) and change its ordering so it is selected before any other profile. I strongly recommend creating a purpose-built mobile profile for guests and registered users using the Mobile profile as a template, modifying the toolbar to match their most common needs. Here is what I've done with JCE Pro, again in the same ultra-narrow display on Joomla's default Cassiopeia template:

Ultimately, you just need to configure your editor and/or check your site's template's HTML and CSS to ensure that everything displays properly. It's nothing that has to do with Engage's code. What we have to do (ask for a relative width of 100%) is already done. Everything else is between you, Joomla, the editor you are using, your template, and your browser; your software is out of this equation.

[nikosdion]

Oh, BTW, I do as I preach. Here's how my own blog's comments look, e.g. https://www.dionysopoulos.me/rtfm-for-joomla-and-wordpress-developers.html in different resolutions:

Very narrow display

iPhone 15

Standard 800x600

I am not giving purely theoretical advice above, or what I am doing on a vanilla development site. I am actually doing those things on real-world sites :)