Comments break MOBILE WIDTH (after new update)

I just installed the plugin and noticed this too… glad to see it wasn’t always like this. Hopefully it gets fixed? Right now, it only breaks the mobile width if someone clicks inside the comment box… since the comment box is at the bottom of the page and would only be clicked on after the article is read, I can live with it for the time being. Hopefully it’s fixed though or else I will have to look for another plugin.

Hi @robsabo10 and @sizzlefoodblog,
Are you sure this is not a mobile device specific issue? Could you please check our demo page and let me know if you see the same problem: https://wpdiscuz.com/demo/

Also, please leave direct URL to the page where we can check the problem on mobile.

Yes. I just tried that link. Anytime I click on the “Join The Discussion” box, the mobile width is broken. Even if I refresh the page, the mobile width is still broken. I have to navigate out of the page and then reload it to get it back.

I’m on an iPhone Xs, using Safari.

Thank you @sizzlefoodblog
Could you please leave some screnshot?

Before clicking https://www.sizzleandsear.com/wp-content/uploads/2020/06/img_0508.png

After clicking
https://www.sizzleandsear.com/wp-content/uploads/2020/06/img_0509.png

Clicking has nothing to do with ours. It breaks the width regardless. Version 5 works fine. Version 7 breaks the width.

Furthermore, two of the three design options, MINIMAL and STANDARD (or default, whatever it is), see one of the two options create MORE space to the right than the other, but both break the mobile width.

Hi @sizzlefoodblog and @robsabo10,
Please put this CSS code in the Top Admin Bar > Customize > Additional CSS > Custom CSS Code textarea. Then delete all caches and check it in Incognito mode (private session) of mobile browsers to avoid the mobile browser hard cache.

#wpdcom .wpd-thread-list {
    overflow: hidden;
}

Added the CSS. Did not help. Tried clearing cache both on the server and locally.Incognito mode tested. Even used another phone that I haven’t used for my website before. Same issue.

Just got an email from Google warning me that my site isn’t optimized for Mobile use because content is wider than the screen.

My website: https://www.sizzleandsear.com

• This reply was modified 4 years, 6 months ago by sizzlefoodblog.

Could the CSS have to be different because I use elementor to place the comments on the page? I know that I’ve had issues with that before. You can click on any of the recipes; they all have comments enabled.

Elementor isn’t the issue. I just remembered that I have a page where the comment placement is controlled by the theme, not elementor. Still seeing the same issue.

Just tried it on the official demo and clicking on the comment box causes it to overflow the screen. On both my iPhone SE and Xs using safari.

Just tested: Chrome too.

Ok, @sizzlefoodblog,
It’s out of our working time. We’ll take a look at this issue tomorrow. Just leave a URL where we’ll be able to see some comments.

• This reply was modified 4 years, 6 months ago by gVectors Team.

Hi @gvectors-team,

It was happening to us too. We added your CSS code above. So far, it appears to be working.

However … we noticed that in mobile devices, when we tap the “Join the Conversation” (comment) field to add a comment, the screen automatically enlarges to improve the user’s viewing experience. We believe this is part of the problem. Kindly consider deleting this “feature.”

Thank you!

Hi @gvectors-team,

Update:

Unfortunately, your CSS code above DOES NOT work. We just learned it causes the tooltip text to truncate when replying to comments. Click here for details.

Any other fix(es)?

Thank you!